[移动开发] 微信小程序显示隐藏分享遮罩层

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 微信小程序显示隐藏分享遮罩层 -> 正文阅读

[移动开发]微信小程序显示隐藏分享遮罩层

效果图如下

?Xml?

<view class="commodity_Sharing" wx:if="{{commodityShare}}" catchtouchmove="{{commodityShare}}"  >
  <view class="somsar_cont">
    <view class="somsar_wrap">
      <view class="somsar_txt_top">分享到</view>
      <view class="somsar_txt_ctn">
        <view class="txt_ctn_top">
          <view class="txt_top">
            <view class="text_top_t"></view>
            <view>微信好友</view>
          </view>
          <view class="txt_top">
            <view class="text_top_t"></view>
            <view>QQ好友</view>
          </view>
          <view class="txt_top">
            <view class="text_top_t"></view>
            <view>本地保存</view>
          </view>
        </view>
      </view>
      <view class="somsar_txt_btn" bindtap="closeBookHandle">取消分享</view>
    </view>
  </view>
</view>

XML 中的点击

<view class="tl_item mrr40" bindtap="openShar">
        <view class="img">
          <image src="commodity/share_icon.png"></image>
        </view>
        <view class="text">分享</view>
      </view>

CSS代码

.commodity_Sharing{
  width: 100%;
  height: 100vh;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
}
.somsar_cont{
  width: 100%;
  min-height: 200px;
  position:absolute;
  left: 0;
  bottom: 0;
  background: #F6F7F8;
  box-shadow: 0px 12px 24px 0px rgba(37, 51, 75, 0.1), 0px 25px 50px 0px rgba(37, 51, 75, 0.25);
  border-radius: 25px 25px 0px 0px;
}
.somsar_wrap{
  width: 100%;
  padding: 30rpx;
  padding-top: 0;
  position: relative;
}
.somsar_txt_top{
  text-align: center;
  font-size: 26rpx;
  padding: 28rpx 0;
}
.somsar_txt_btn{
  position: relative;
  background: #9999;
  color: #fff;
  font-size: 36rpx;
  padding: 28rpx 0rpx;
  border: 1px solid #ccc;
  text-align: center;
  border-radius: 32rpx;
}
.somsar_txt_ctn{
  width: 100%;
  padding: 40rpx 0rpx;
}
.txt_ctn_top{
 display: flex;
 justify-content: space-between;
 width: 100%;
}
.txt_top{
  width: 150rpx;
  height: 100rpx;
  font-size: 26rpx;
  display: inline-block;
  text-align: center;
}
.text_top_t{
  width: 80rpx;
  height: 80rpx;margin: 0 auto;
  border: 1px solid red;
  border-radius: 30rpx;
}
.txt_ctn_btn{
  display: flex; 
  padding:30rpx 0rpx;
}

JS的?

   data:{
 commodityShare:false,}
  
closeBookHandle(){
    this.setData({
      commodityShare:false
    })
  },
  openShar(){
    this.setData({
      commodityShare:true
    })
  }

完事?