小程序Scroll-view上拉滾動刷新數(shù)據(jù)

更新時間：2020年06月21日 08:55:51 作者：Rechal_Mei

這篇文章主要為大家詳細(xì)介紹了小程序Scroll-view上拉滾動刷新數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了小程序Scroll-view上拉滾動刷新數(shù)據(jù)的具體代碼，供大家參考，具體內(nèi)容如下

因為項目需求，我需要做一個上拉刷新，但是我不是小程序的原生刷新生命周期函數(shù)事件

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

把自己需要滾動的內(nèi)容放在這個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}}">賣家未發(fā)貨</view>
  <view class="good-status" wx:if="{{item.goodStatus==1}}">賣家已發(fā)貨</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>
  <!-- 購買商品個數(shù) -->
  <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">確認(rèn)收貨</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>已經(jīng)到底了...</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({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 data: {
 idx: 0, //默認(rèn)選中第一項
 hasMore: true,
 indexNum: 0,
 tabs: ['全部', '待付款', '待發(fā)貨', '已付款', '待評價'], // tab欄標(biāo)題
 tabindex: 0, // 控制tab欄切換
 msgPage: 1, //分頁
 washcar: [{
 id: 0,
 tips: "洗車"
 },
 {
 id: 1,
 tips: "違章查詢"
 },
 {
 id: 2,
 tips: "商城訂單"
 },
 {
 id: 3,
 tips: "會員"
 },
 ],
 selecttab: [{
 id: 0,
 tips: "處理中"
 },
 {
 id: 1,
 tips: "已成功"
 },
 {
 id: 2,
 tips: "已撤銷"
 },
 {
 id: 3,
 tips: "全部"
 },

 ],
 

 goods: [
 {
 shopName: '商鋪名稱', // 商鋪名稱
 goodStatus: '賣家已發(fā)貨', // 商品狀態(tài)
 goodImg: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1986179278,1118313821&fm=27&gp=0.jpg', // 商品圖片
 goodName: '商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱商品名稱', // 商品名稱
 goodDesc: '商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述', // 商品描述
 shopServers: ['商鋪服務(wù)', '商鋪服務(wù)', '商鋪服務(wù)'], // 商鋪服務(wù)
 goodPrice: '111.00', // 商品價格
 goodNum: '2', // 購買的商品數(shù)量
 goodTotalPrice: '111.00', // 商品總價格
 status: 0, // 訂單的狀態(tài)， 0表示還未收貨， 1表示已收貨還未評價， 2表示已經(jīng)評價
 }, 
 ],
 },
 //點擊切換
 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
 })
 })

 },
 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 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
 })
 })
 },
 //下拉刷新數(shù)據(jù)
 scrolltolower() {
 if (this.lock) {
 wx.showToast({
 title: '已經(jīng)到底了！',
 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: '已經(jīng)到底了！',
 icon: 'none'
 })
 this.setData({
 hasMore: false
 })
 return
 }
 wx.hideLoading()
 goodsList = [...goodsList, ...newGoods] //取數(shù)組里的每一個值，然后再賦值到一個新數(shù)組里
 this.setData({
 goods: goodsList
 })
 })
 },
})

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: