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

微信小程序学习:下拉刷新上拉加载与弹窗的两种姿势

发布:2018-01-27 11:32浏览: 来源:网络 作者:cola


  • 在js文件里直接重写"onPullDownRefresh"和"onReachBottom"方法即可;

    • xml
      
      <scroll-view scroll-y = true >
      .........
      </scroll-view>
      js
      
      onPullDownRefresh: function() {
      // Do something when pull down.
      console.log('刷新');
      },
      
      onReachBottom: function() {
      // Do something when page reach bottom.
      console.log('circle 下一页');
      },
  • 在scroll-view里设定bindscrolltoupper和bindscrolltolower,然后在js里写好触发事件后对应的方法。[注意,使用这个模式一定要设置scroll-view的高度,100%不知道为什么设置后没效果,建议使用100vh]

    •  

    • xml
       

      <scroll-view scroll-y = true bindscrolltolower="loadMore" bindscrolltoupper="refesh">
      ..........
      </scroll-view>
    • js
       

      onPullDownRefresh: function() {
      // Do something when pull down.
      console.log('刷新');
      },
      
      onReachBottom: function() {
      // Do something when page reach bottom.
      console.log('circle 下一页');
      },
  • 二:弹窗的两种姿势
  • 直接在代码里控制

    •  

    • js
       

      showLoading:function(){
      wx.showToast({
      title: '加载中',
      icon: 'loading'
      });
      },
      cancelLoading:function(){
      wx.hideToast();
      }
  • 在wxml文件里布局弹窗,利用条件渲染,在js代码里控制是否显示

    •  

    • wxml
       

      <view >
      <loading wx:if="{{showLoading}}">加载中</loading>
      </view>
    • js
       

      data: {
      showLoading:true
      },
      showLoading:function(){
      this.setData({
      showLoading:true
      })
      },
      cancelLoading:function(){
      this.setData({
      showLoading:false
      })
      





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