小程序Scroll-view上拉滚动刷新数据

2020-06-21 09:59 来源:易采站长站 作者:王旭 点击: 评论:

A-A+

原标题:小程序Scroll-view上拉滚动刷新数据

本文实例为大家分享了小程序Scroll-view上拉滚动刷新数据的具体代码,供大家参考,具体内容如下

因为项目需求,我需要做一个上拉刷新,但是我不是小程序的原生刷新生命周期函数事件

小程序scroll-view,有一个滚到底部触发事件bindscrolltolower加粗样式

把自己需要滚动的内容放在这个scroll-view之间,然后。给scroll-view一个滚动高度
首先先看一下效果图吧

order.wxml页面

<scroll-view class='scroll' scroll-y="{{true}}" bindscrolltolower="scrolltolower">
 <view class="tabs">
 <block wx:for="{{ tabs }}" wx:key='{{ index }}'>
 <view bind:tap="changeTab" data-index='{{ index }}' class="tab {{ tabindex === index ? 'active' : '' }}">{{ item }}</view>
 </block>
 </view>
 <view style="height: 80rpx"></view>
 <view>
 <block wx:for="{{ goods }}" wx:key="{{ index }}">
 <view class="content">
 <view class="conbg">
  <view class="con-top">
  <view class="shopname iconfont icon-right ellipsis">{{ item.shopName }}</view>
  <view class="good-status" wx:if="{{item.goodStatus==0}}">卖家未发货</view>
  <view class="good-status" wx:if="{{item.goodStatus==1}}">卖家已发货</view>
  </view>
  <view class="goodinfo">
  <!-- 商品图 -->
  <image class="goodimg" src="{{ item.goodImg }}" mode="scaleToFill"></image>
  <!-- 商品信息 -->
  <view class="good-info">
  <view class="good-title ellipsis2">{{ item.goodName }}</view>
  <view class="good-desc ellipsis2">{{ item.goodDesc }}</view>
  <view class="shop-server">
  <text wx:for="{{ item.shopServers }}" wx:key="{{ index }}">{{ item }}</text>
  </view>
  </view>
  <view class="good-price">
  <view class="price">¥ {{ item.goodPrice }}</view>
  <!-- 购买商品个数 -->
  <view class="num">x {{ item.goodNum }}</view>
  </view>
  </view>
  <!-- 商品总计 -->
  <view class="total">
  <!-- <text>共{{ goodNum }}件商品</text> -->
  <text>合计: ¥{{ item.goodTotalPrice }}</text>
  </view>
  <view class="operate">
  <view class="check-delivery">查看物流</view>
  <view>
  <view class="comfirm-delivery">确认收货</view>
  </view>

  </view>
 </view>
 </view>
 </block>
 <block wx:if="{{goods==''}}">
 <view class='goodsmsg'>
 <image class='tab1Img' src="../images/order.png"></image>
 <text>你暂时还没有商品~</text>
 <text class='buyMore'>去逛逛~</text>
 </view>
 </block>
 </view>
 <view class="no-more" wx:if='{{ hasMore}}'>加载中...</view>
 <view class="no-more" wx:else>已经到底了...</view>
</scroll-view>

【易采站长站编辑:秋军】