找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索本站精品资源

首页 教程频道 小程序开发 查看内容

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

作者:模板之家 2018-1-30 12:05 2594人关注

一:点击空白处隐藏input,点击评论出现 wxml: scroll-view style = height : {{ windowHeight }} px ; width : {{ windowWidth }} px ; scroll-y = true bindscrolltoupper = pullDownRefresh bindscrolltolower = ...

一:点击空白处隐藏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="{{'http://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. <


路过

雷人

握手

鲜花

鸡蛋
原作者: 模板之家 来自: 网络收集

全部回复(0)