100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 微信小程序 评论input 弹出框

微信小程序 评论input 弹出框

时间:2020-10-10 07:02:45

相关推荐

微信小程序 评论input 弹出框

运用了一个组件:

https://youzan.github.io/vant-weapp/#/popup

这里面有详细的介绍和使用方法!!!

需求:点击评论,弹出评论的输入框,再次点击评论又会隐藏弹出的评论框

首先在wxml里面编写弹出层:

<van-popup custom-style='style' overlay="{{ false }}" position="bottom" show="{{ show }}"><view class='popup'><input class='input' placeholder-class="placeholderStyle" placeholder='想说的话......'></input><button class='button'>发送</button></view></van-popup>

在js里面写事件:

onClose() {this.setData({ show: true });},// 点击下拉显示框selectTap() {this.setData({show: !this.data.show});},还要在data里面定义show的初始变量:show: false,

在你需要绑定事件的地方绑定你后面定义的事件

最后贴心的贴上wxss

.style{z-index:10000;width:100%; }.popup{display: flex; align-items: center;background:rgb(242, 242, 242,1);}.input{width: 65%;height: 60rpx; display:block; margin: 30rpx auto;background: #fff;}.placeholderStyle{font-size: 26rpx;margin: 0 20rpx;}.button{height: 60rpx;width: 20%;line-height:60rpx;text-align: center; font-size: 30rpx;box-shadow: 8rpx;color:#979797;}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。