评论及遮罩层 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 () {
}
})