欢迎光临,了解微信小程序开发,就上易用通!

小技巧四则: 点击空白处隐藏input,下拉刷新,全局变量

发布:2018-01-30 12:07浏览: 来源:网络 作者:cola

一:点击空白处隐藏input,点击评论出现

wxml:

 

				
  1. <scroll-view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" scroll-y="true" bindscrolltoupper="pullDownRefresh" bindscrolltolower="pullUpLoad" bindtap="click_blank">
  2. <view wx:if="{{comment}}" class="comment-input"><input type="text" name="content" auto-focus placeholder-style="margin-top:-8rpx;" placeholder="{{comment_placeholder}}" bindchange="comment_input" /><button>发送</button></view>

js:

 

				
  1. // 评论(点击空白处隐藏input,点击评论出现)
  2. click_blank:function(e){
  3. var flag = "";
  4. var comment_placeholder ="";
  5. if(e.target.dataset.comment==1){
  6. flag = true;
  7. comment_placeholder = e.target.dataset.username;
  8. }else{
  9. flag = false;
  10. comment_placeholder = "";
  11. }
  12. this.setData({
  13. comment:flag,
  14. comment_placeholder:"评论"+comment_placeholder+"动态"
  15. })
  16. },
 

二:下拉刷新

wxml:

 

				
  1. <view wx:if="{{items}}">
  2. <scroll-view scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower" style="height: {{windowHeight}}px">
  3. <view wx:for="{{items}}">
  4. <view class="item">
  5. <view class="item-top">
  6. <view class="avatar" wx:if="{{item.avatar}}">
  7. <image mode="aspectFill" src="{{'https://uerb.net/'+item.avatar}}"></image>
  8. </view>
  9. <view class="avatar" wx:else><image mode="aspectFill" src="../img/default_img.png"></image></view>
  10. <view class="item-username">
  11. <text>{{item.username}}{{item.jobname}}</text>
  12. </view>
  13. <view class="item-time">{{item.adddate}}</view>
  14. </view>
  15. </view>
  16. </view>
  17. <view wx:if="{{hasMore}}">
  18. <view wx:if="{{nomore}}" class="tips">
  19. <text>没有更多内容了</text>
  20. </view>
  21. <view wx:else class="tips">
  22. <image src="../img/loading.gif" mode="aspectFill"/>
  23. <text>玩了命的加载中...</text>
  24. </view>
  25. </view>
  26. </scroll-view>
  27. <loading hidden="{{loading}}">加载中...</loading>

js:

 

				
  1. Page({
  2. data: {
  3. windowHeight:"",//屏幕高
  4. page:1,
  5. totalPage:"",//总页数
  6. nomore:false,//加载完所有信息显示
  7. <





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。