微信小程序 利用css实现遮罩效果实例详解
实现效果图：
js文件代码：
获取应用实例
var app = getApp()
Page({
data: {
flag: false
},a: function(){
this.setData({flag: false})
},b: function(){
this.setData({flag: true})
}
})
wxss文件代码：
Box-shadow:0rpx 10rpx 9rpx 0rpx rgba(240,80,0.35);
}
.btn2{margin:30rpx auto 40rpx auto;border:1px solid transparent;outline:none;-webkit-appearance: none;-moz-appearance: none;height: 88rpx;line-height: 88rpx;width:630rpx;border-radius: 60rpx;font-family: '微软雅黑';font-size: 36rpx;color: #ffffff;cursor: pointer;background-color: #5adad0;text-align: center;Box-shadow:0rpx 10rpx 9rpx 0rpx rgba(90,218,208,0.35);
}
wxml文件代码：
<view class="v1">由于您周边3公里有没有指尖快递服务站，指尖快递将无法为您提供上门取件服务。您可以试试拨打电话或网上预约快递公司。</view>
<view class="btn1" bindtap="b">
<p class="p1">拨打电话</p>
<p class="p2">可拨打电话直接与快递公司联系哦</p>
</view>
<view class="btn2" bindtap="b">
<p class="p1">网上预约快递公司</p>
<p class="p2">快递公司可能无法及时响应，请耐心等待哦</p>
</view>
</view>
<view bindtap="a">显示
到此位置，demo已经完成
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
原文链接：https://www.f2er.com/weapp/42250.html