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

当前位置： 易用通 > 开发文档 > 入门

点击空白处隐藏input,下拉刷新,全局变量

发布：2018-01-25 11:46浏览： 次来源：网络 作者：tianshu

一：点击空白处隐藏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. <span style="white-space: pre;">data: {
  3. windowHeight:"",//屏幕高
  4. page:1,
  5. totalPage:"",//总页数
  6. nomore:false,//加载完所有信息显示
  7. hasMore:true//加载时显示
  8. },
  9. // 加载
  10. onLoad: function (e) {
  11. console.log(this.data.page);
  12.         this.getDataFromServer(this.data.page);
  13.     },
  14.     // 读取屏幕高度，赋值给scroll-view
  15.     onShow: function( e ) {
  16. wx.getSystemInfo( {
  17.         success: ( res ) => {
  18. this.setData( {
  19. windowHeight: res.windowHeight
  20. })
  21.         }
  22. })
  23. },
  24. // 上拉加载更多
  25.     lower: function( e ) {
  26.     var page = this.data.page+1;
  27.     var nomore = this.data.nomore;
  28.         if(page > this.data.totalPage){
  29.         page = this.data.totalPage;
  30.         nomore =true;
  31.         }
  32.         this.setData( {
  33.           page: page,
  34.           nomore:nomore
  35.         })
  36.         this.getDataFromServer( page );
  37.         console.log( "上拉加载更多...." + page);
  38.     },
  39.     // 下拉返回
  40.     upper: function( e ) {
  41.     var page = this.data.page-1;
  42.         
  43.         if(page < 1){
  44.         page = 1;
  45.         }
  46.         this.setData( {
  47.           page: page
  48.         })
  49.         this.getDataFromServer( page );
  50.         console.log( "下拉返回上页...." + page)
  51.     },
  52.     //获取网络数据的方法
  53.     getDataFromServer: function (page) {
  54.     console.log(page,this.data.totalPage);
  55.         if(this.data.totalPage &&page > this.data.totalPage){
  56.             page = this.data.totalPage;
  57.         }
  58.         var that = this;
  59.         that.setData({
  60.             loading: false,
  61.             hasMore: true
  62.         }),
  63.         wx.request({
  64.             url: 'url?p/'+page,
  65.             data: {
  66.                 size: 10,
  67.                 parentsid: wx.getStorageSync('parentsid'),
  68.                 nurseryid: wx.getStorageSync('nurseryid'),
  69.                 classid: wx.getStorageSync('classid'),
  70.                 childid: wx.getStorageSync('childid')
  71.             },
  72.             header: {
  73.                 'Content-Type': 'application/json'
  74.             },
  75.             success:function(res) {
  76.                 if(res.statusCode = 200){
  77.                     var items = res.data.dynamiclist;
  78.                     that.setData({
  79.                         items: items,
  80.                         totalPage: res.data.totalPage,
  81.                         loading: true, 
  82.                         hasMore: false
  83.                     });
  84.                 }else{
  85.                     console.log("服务器异常");
  86.                 }
  87.             }
  88.         })
  89.     }
  90. })</span>

wxss:

  1. /*提示*/
  2. .tips {
  3.     font-size: 28rpx;
  4.     text-align: center;
  5.     padding: 50rpx;
  6.     color: #ccc;
  7. }
  8. .tips image {
  9.     width: 40rpx;
  10.     height: 40rpx;
  11.     margin-right: 20rpx;
  12. }
  13.  
  14.  
  15. .tips image,
  16. .tips text {
  17.     vertical-align: middle;
  18. }


三：全局变量

微信小程序里面有个app.js，我们可以在这个里面设置全局变量，像酱

 

  1. App({  
  2.      data:{  
  3.          servsers:"https://192.168.0.253:3000"  
  4.       }  
  5. })  

在外面就这样引用就可以了，这个真的是简单


  1. getApp().data.servsers


四：更改navbar上面的文字

  1. wx.setNavigationBarTitle({  
  2.       title: '我是通过API设置的NavigationBarTitle'  
  3.     })


就酱便可以改变标题栏的文字了



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

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有