• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

小程序遮罩层 - Hello,Candy

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

小程序遮罩层

评论及遮罩层 WXML:

<!--评论区域 --> <view class="Y_pinlun"> <view class="Y_p-top"> <view class="Y_p-all"> <view class="Y_p-one"> <image src="../../images/eye.png" style="width:20px;height:20px"></image> <text>266</text> </view> <view class="Y_p-one"> <image src="../../images/zan.png" style="width:20px;height:20px"></image> <text>266</text> </view> </view> <!--点击写评论,弹出遮罩层 --> <view class="Y_p-last" bindtap="show" style="width:20%"> <image src="../../images/pen.png" style="width:20px;height:20px"></image> <text>写评论</text> </view> </view> </view> <view class="discuss"> <view class="discuss_one"> <view class="left_photo"> <image src="../../images/jianjie.png"></image> </view> <view class="middle_pj" style="padding-left:10px;box-sizing:border-box"> <view class="xingxing"> <text></text> <text></text> <text></text> <text></text> <text></text> </view> <view class="middle_zi">哈哈哈</view> </view> <view class="right_time">2018-05-03</view> </view> <view class="discuss_one"> <view class="left_photo"> <image src="../../images/jianjie.png"></image> </view> <view class="middle_pj" style="padding-left:10px;box-sizing:border-box"> <view class="xingxing"> <text></text> <text></text> <text></text> <text></text> <text></text> </view> <view class="middle_zi">哈哈哈</view> </view> <view class="right_time">2018-05-03</view> </view> <view class="discuss_one"> <view class="left_photo"> <image src="../../images/jianjie.png"></image> </view> <view class="middle_pj" style="padding-left:10px;box-sizing:border-box"> <view class="xingxing"> <text></text> <text></text> <text></text> <text></text> <text></text> </view> <view class="middle_zi">哈哈哈</view> </view> <view class="right_time">2018-05-03</view> </view> </view> </view> <view> <view class="zhezao" wx:if="{{flag==1}}"> <view class="t_w"> <view class="t_image" bindtap="conceal"> <image class="t_image1" src="../../images/ch.png"></image> </view> <view class="tanchu_view"> <view> <form> <view class="bg_start"> <view class="bg_view"></view> <view class="bg_view"></view> <view class="bg_view"></view> <view class="bg_view"></view> <view class="bg_view"></view> </view> <view class="txtys"> <textarea placeholder=\'评论内容\'></textarea> </view> <!--提交开始--> <view class="txtsure"> <view class="txtsurebg" bindtap="conceal"> <text class="txtsurename">提交</text> </view> </view> </form> </view> </view> <!--弹出框结束--> </view> </view> </view>
遮罩层Wxss
.zhezao
{ position:fixed; width:100%; height:100%; top:0px; background:rgba(0,0,0,0.4); overflow: hidden; } .t_w{ position:relative; } .tanchu_view{ width: 80%; margin:25% auto; overflow: hidden; background-color: #fff; border-radius: 10rpx; padding: 4rpx; } .bg_view{ /* margin:30rpx auto 30rpx auto; */ color:#fcb712; font-size:70rpx; padding-right:8px; text-align: center; display:inline-block; } .bg_start{ width:100%; text-align:center; } .txtys{ font-size: 24rpx; padding:8px 10px; box-sizing:border-box; } .txtys textarea{ padding-left:10px; padding-top:10px; background:#eee; box-sizing:border-box; border:1px solid #dedede;width:100% } .txtsure{ width: 100%; height: 100%; display: flex; justify-content: center; } /*提交背景*/ .txtsurebg{ font-size:13px; display: flex; justify-content: center; align-items: center; width:90%; margin: 50rpx 0; background-color:#eee; flex-direction: column; padding:16rpx 0; border-radius:8rpx } /*确定文本*/ .txtsurename{ margin-bottom: 0rpx; color: #000; font-size: 28rpx; } /*右上角图标*/ .t_image{ width:15px; height:15px; position: absolute; top: 3%; left:85%; } /*右上角图标*/ .t_image1{ display:block; width:15px; height:15px; } .discuss{box-sizing:border-box;} .left_photo image{width:35px;height:35px;border-radius:50%} .left_photo{width:10%;} .discuss_one{display:flex;border-bottom:1px solid #eee;padding:10px 0} .xingxing text{display:inline-block;color:#fcb712} .middle_zi{font-size:12px;color:#707070;padding-top:5px} .middle_pj{width:70%} .right_time{font-size:12px;color:#707070;width:30%;text-align:right;line-height:41px;}

 

 data: {
    flag:0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },
  // 遮罩层显示  
  show: function () {
    this.setData({ flag: 1 })
  },
  // 遮罩层隐藏  
  conceal: function () {
    this.setData({ flag: 0 })
  },  

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  }
})

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap