小程式Scroll-view上拉滾動重新整理資料

阿新 • • 發佈：2020-06-24

本文例項為大家分享了小程式Scroll-view上拉滾動重新整理資料的具體程式碼，供大家參考，具體內容如下

因為專案需求，我需要做一個上拉重新整理，但是我不是小程式的原生重新整理生命週期函式事件

小程式scroll-view，有一個滾到底部觸發事件bindscrolltolower加粗樣式

把自己需要滾動的內容放在這個scroll-view之間，然後。給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>

order.wxss

.tabs {
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 width: 100%;
 height: 80rpx;
 top: 0;
 left: 0;
 background: #f2f2f2;
}
.tabs .tab {
 padding: 0 32rpx;
 font-size: 28rpx;
 height: 76rpx;
 line-height: 76rpx;
 color: #666;
 border-bottom: 4rpx solid transparent;
}
.tabs .tab.active {
 border-bottom-color: #e94a01;
 color: #e94a01;
}
.content {
 padding: 20rpx;
 box-sizing: border-box;
}
.content .conbg {
 background-color: #fff;
 box-sizing: border-box;
 border-radius: 20rpx;
 padding: 0 20rpx 20rpx;
}
.con-top {
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 24rpx;
 height: 76rpx;
 line-height: 76rpx;
}
.shopname {
 font-size: 24rpx;
}
.shopname:after {
 color: #666;
 margin-left: 10rpx;
}
.good-status {
 flex-shrink: 0;
 margin-left: 20rpx;
 color: #e94a01;
}
.goodinfo {
 display: flex;
}
.goodinfo .goodimg {
 width: 188rpx;
 height: 188rpx;
 border-radius: 10rpx;
 flex-shrink: 0;
 margin-right: 20rpx;
}
.goodinfo .good-info {
 font-size: 28rpx;
}
.goodinfo .good-info .good-title {
 font-weight: bold;
}
.goodinfo .good-info .good-desc {
 color: #666;
}
.goodinfo .good-info .shop-server {
 display: flex;
 margin-top: 10rpx;
 flex-wrap: wrap;
}
.goodinfo .good-info .shop-server text {
 padding: 6rpx;
 margin-right: 10rpx;
 background-color: rgba(211,94,36,0.2);
 color: #cc602f;
 font-size: 20rpx;
 margin-bottom: 10rpx;
 border-radius: 6rpx;
}
.goodinfo .good-price {
 flex-shrink: 0;
 font-size: 24rpx;
 display: flex;
 flex-direction: column;
}
.goodinfo .good-price .price {
 font-weight: bold;
 font-size: 28rpx;
}
.goodinfo .good-price .num {
 text-align: right;
 font-size: 28rpx;
 color: #666;
}
.total {
 display: flex;
 justify-content: flex-end;
 height: 80rpx;
 line-height: 80rpx;
 margin-top: 30rpx;
 font-size: 28rpx;
 font-weight: bold;
}
.total text {
 margin-left: 20rpx;
}
.operate {
 display: flex;
 justify-content: flex-end;
 font-size: 28rpx;
}
.operate > view {
 height: 60rpx;
 line-height: 60rpx;
 padding: 0 24rpx;
 border: 1px solid #666;
 margin: 0 10rpx;
 border-radius: 30rpx;
}
.operate > view.comfirm-delivery {
 color: #d64904;
 border-color: #d64904;
}
.no-more {
 height: 80rpx;
 line-height: 80rpx;
 text-align: center;
 font-size: 24rpx;
}
.goodsmsg{
 width: 100%;
 height: 300rpx;
 display: flex;
 justify-content: space-evenly;
 align-items: center;
 flex-direction: column;

}

order.js

// pages/home/order/order.js
var tool = require("../../../utils/util.js")
Page({

 /**
 * 頁面的初始資料
 */
 data: {
 idx: 0,//預設選中第一項
 hasMore: true,indexNum: 0,tabs: ['全部','待付款','待發貨','已付款','待評價'],// tab欄標題
 tabindex: 0,// 控制tab欄切換
 msgPage: 1,//分頁
 washcar: [{
 id: 0,tips: "洗車"
 },{
 id: 1,tips: "違章查詢"
 },{
 id: 2,tips: "商城訂單"
 },{
 id: 3,tips: "會員"
 },],selecttab: [{
 id: 0,tips: "處理中"
 },tips: "已成功"
 },tips: "已撤銷"
 },tips: "全部"
 },goods: [
 {
 shopName: '商鋪名稱',// 商鋪名稱
 goodStatus: '賣家已發貨',// 商品狀態
 goodImg: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1986179278,1118313821&fm=27&gp=0.jpg',// 商品圖片
 goodName: '商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱',// 商品名稱
 goodDesc: '商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述',// 商品描述
 shopServers: ['商鋪服務','商鋪服務','商鋪服務'],// 商鋪服務
 goodPrice: '111.00',// 商品價格
 goodNum: '2',// 購買的商品數量
 goodTotalPrice: '111.00',// 商品總價格
 status: 0,// 訂單的狀態， 0表示還未收貨， 1表示已收貨還未評價， 2表示已經評價
 },},//點選切換
 tabChange: function(e) {
 var navigitionIndex = e.currentTarget.dataset.index;
 this.setData({
 indexNum: navigitionIndex
 })

 },//滑動切換
 changeswpier(e) {
 var cur = e.detail.current;
 this.setData({
 indexNum: cur
 })
 },//查詢違章選項卡
 checkviolation(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
 idx: index,})

 },changeTab(e) {
 var page = this.data.mgsPage
 const index = e.currentTarget.dataset.index
 this.setData({
 tabindex: index
 })
 tool.post('/order_list',{
 status: index - 1,page: page
 })
 .then((res) => {
 var goods = this.data.goods
 this.setData({
  goods: res.data.goods
 })
 })

 },/**
 * 生命週期函式--監聽頁面載入
 */
 onLoad: function(options) {
 var id = options.id;
 this.setData({
 indexNum: id
 })
 var page = this.data.mgsPage
 tool.post('/order_list',{
 page: page
 })
 .then((res) => {
 var goods = this.data.goods
 this.setData({
  goods: res.data.goods
 })
 })
 },//下拉重新整理資料
 scrolltolower() {
 if (this.lock) {
 wx.showToast({
 title: '已經到底了！',icon: 'none'
 })
 return
 }
 this.data.msgPage++
 wx.showLoading({
 title: '正在載入中...',})
 tool.post('/order_list',{
 page: this.data.msgPage
 })
 .then((res) => {
 var goodsList = this.data.goods;
 const newGoods = res.data.goods
 if (newGoods.length <= 0) {
  this.lock = true
  wx.hideLoading()
  wx.showToast({
  title: '已經到底了！',icon: 'none'
  })
  this.setData({
  hasMore: false
  })
  return
 }
 wx.hideLoading()
 goodsList = [...goodsList,...newGoods] //取數組裡的每一個值，然後再賦值到一個新數組裡
 this.setData({
  goods: goodsList
 })
 })
 },})

為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。