小程序模板网

小程序评论框实现

wxmlview class="talk" bindtap="bindReply"回复/viewview class="release" hidden="{{!releaseFocus}}" textarea class="text" placeholder-class="input_null" fixed="true" maxlength="-1&qu

 
 
 

wxml

 

		
  1. <view class="talk" bindtap="bindReply">回复</view>
  2.  
  3. <view class="release" hidden="{{!releaseFocus}}">
  4. <textarea class="text"
  5. placeholder-class="input_null"
  6. fixed="true"
  7. maxlength="-1"
  8. show-confirm-bar="false"
  9. cursor-spacing="15"
  10. auto-height="true"
  11. focus="{{releaseFocus}}"
  12. placeholder="回复 {{releaseName}}"></textarea>
  13. <view class="submit">发送</view>
  14. </view>

wxss

 

		
  1. .input_null{
  2. color: #C9C9C9;
  3. }
  4.  
  5. .release{
  6. display: flex;
  7. align-items: flex-end; /*底部对齐*/
  8. justify-content: space-between; /*两端对齐*/
  9. box-sizing: border-box;
  10. position: fixed;
  11. left: 0;
  12. bottom: 0;
  13. width: 100%;
  14. padding: 18rpx 0 18rpx 30rpx;
  15. background-color: #F7F8F7;
  16. font-size: 28rpx;
  17. z-index: 999;
  18. }
  19. .release .text{
  20. width: 604rpx;
  21. min-height: 34rpx;
  22. max-height: 102rpx; /*最多显示三行*/
  23. border-width: 15rpx 20rpx; /*使用padding与预期留白不一致,故使用border*/
  24. border-style: solid;
  25. border-color: #ffffff;
  26. line-height: 34rpx;
  27. font-size: 28rpx;
  28. background-color: #ffffff;
  29. border-radius: 4rpx;
  30. }
  31. .release .submit{
  32. width: 116rpx;
  33. height: 64rpx;
  34. line-height: 64rpx;
  35. text-align: center;
  36. color: #66CC00;
  37. }

js

 

		
  1. Page({
  2. /**
  3. * 页面的初始数据
  4. */
  5. data: {
  6. releaseFocus: false,
  7. },
  8. /**
  9. * 生命周期函数--监听页面加载
  10. */
  11. onLoad: function (options) {
  12.  
  13. },
  14. /**
  15. * 点击回复
  16. */
  17. bindReply: function(e){
  18. this.setData({
  19. releaseFocus: true
  20. })
  21. }
  22. })

预览

显示



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18373.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询