微信小程序?qū)崿F(xiàn)本地分頁(yè)加載
更新時(shí)間：2022年08月24日 15:44:53 作者：嚴(yán)定洲
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)本地分頁(yè)加載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)本地分頁(yè)加載的具體代碼，供大家參考，具體內(nèi)容如下
先看看效果圖：
下面附上代碼：（這些圖片的地址記得改成自己的）
1、js文件：
// pages/shoplist/shoplist.js
Page({
?
? /**
? ?* 頁(yè)面的初始數(shù)據(jù)
? ?*/
? data:{
?
? ? query:{},
? ? "list":[
? ? ? {
? ? ? ? "id":"1",
? ? ? ? "name":"apple",
? ? ? ? "image":"/shoplist_images/apple.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"18601416781"
? ? ? },
? ? ? {
? ? ? ? "id":"2",
? ? ? ? "name":"avocado",
? ? ? ? "image":"/shoplist_images/avocado.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"3",
? ? ? ? "name":"avocado_1",
? ? ? ? "image":"/shoplist_images/avocado_1.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"4",
? ? ? ? "name":"banana",
? ? ? ? "image":"/shoplist_images/banana.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"5",
? ? ? ? "name":"barbecue",
? ? ? ? "image":"/shoplist_images/barbecue.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"6",
? ? ? ? "name":"beer",
? ? ? ? "image":"/shoplist_images/beer.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"7",
? ? ? ? "name":"beer_mug",
? ? ? ? "image":"/shoplist_images/beer_mug.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"8",
? ? ? ? "name":"birthday_cake",
? ? ? ? "image":"/shoplist_images/birthday_cake.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"9",
? ? ? ? "name":"bone",
? ? ? ? "image":"/shoplist_images/bone.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"10",
? ? ? ? "name":"bottle",
? ? ? ? "image":"/shoplist_images/bottle.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"11",
? ? ? ? "name":"bowl",
? ? ? ? "image":"/shoplist_images/bowl.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"12",
? ? ? ? "name":"bread",
? ? ? ? "image":"/shoplist_images/bread.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"13",
? ? ? ? "name":"bread_2",
? ? ? ? "image":"/shoplist_images/bread_2.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"14",
? ? ? ? "name":"cake_1",
? ? ? ? "image":"/shoplist_images/cake_1.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"15",
? ? ? ? "name":"cake_2",
? ? ? ? "image":"/shoplist_images/cake_2.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"16",
? ? ? ? "name":"cake_3",
? ? ? ? "image":"/shoplist_images/cake_3.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"17",
? ? ? ? "name":"cake_4",
? ? ? ? "image":"/shoplist_images/cake_4.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"18",
? ? ? ? "name":"cake_5",
? ? ? ? "image":"/shoplist_images/cake_5.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"19",
? ? ? ? "name":"candy",
? ? ? ? "image":"/shoplist_images/candy.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"20",
? ? ? ? "name":"canned_fruit",
? ? ? ? "image":"/shoplist_images/canned_fruit.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"21",
? ? ? ? "name":"carrot",
? ? ? ? "image":"/shoplist_images/carrot.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"22",
? ? ? ? "name":"chafing_dish_2",
? ? ? ? "image":"/shoplist_images/chafing_dish_2.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"23",
? ? ? ? "name":"chafing_dish",
? ? ? ? "image":"/shoplist_images/chafing_dish.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"24",
? ? ? ? "name":"cheese",
? ? ? ? "image":"/shoplist_images/cheese.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"25",
? ? ? ? "name":"chef_hat",
? ? ? ? "image":"/shoplist_images/chef_hat.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"26",
? ? ? ? "name":"cherry",
? ? ? ? "image":"/shoplist_images/cherry.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"27",
? ? ? ? "name":"chicken",
? ? ? ? "image":"/shoplist_images/chicken.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"28",
? ? ? ? "name":"chicken_leg",
? ? ? ? "image":"/shoplist_images/chicken_leg.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"29",
? ? ? ? "name":"crab",
? ? ? ? "image":"/shoplist_images/crab.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"30",
? ? ? ? "name":"fish",
? ? ? ? "image":"/shoplist_images/fish.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"31",
? ? ? ? "name":"hamburger",
? ? ? ? "image":"/shoplist_images/hamburger.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"32",
? ? ? ? "name":"hot_pot",
? ? ? ? "image":"/shoplist_images/hot_pot.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"33",
? ? ? ? "name":"lemon",
? ? ? ? "image":"/shoplist_images/lemon.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"34",
? ? ? ? "name":"popcorn",
? ? ? ? "image":"/shoplist_images/popcorn.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"35",
? ? ? ? "name":"popcorn_2",
? ? ? ? "image":"/shoplist_images/popcorn_2.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"
? ? ? },
? ? ? {
? ? ? ? "id":"36",
? ? ? ? "name":"snacks",
? ? ? ? "image":"/shoplist_images/snacks.png",
? ? ? ? "address":"磚井村",
? ? ? ? "tel":"186"}], ??
? ? ? i:0,//表示當(dāng)前item項(xiàng)個(gè)數(shù)
? ? ? shoplist:[],
? ? ? result:[],
? ? ? isloading:false
? ? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
? ?*/
? onLoad(options) {
? ? this.setData
? ? ({
? ? ? query:options
? ? })
? ? this.getshoplist()
? ??
? },
? getshoplist()
? {
? ? //當(dāng)頁(yè)面加載完畢時(shí)停止繼續(xù)發(fā)出請(qǐng)求
? ? if(this.data.i>this.data.result.length)
? ? {
? ? ? return wx.showToast({
? ? ? ? title: '數(shù)據(jù)加載完畢！',
? ? ? ? icon:'none'
? ? ? })
? ? }
? ? //防止多次下滑觸底從而發(fā)出多次請(qǐng)求
? ? this.setData({isloading:true}),
? ? wx.showLoading({
? ? ? title: '數(shù)據(jù)加載中...',
? ? })
? ? this.data.shoplist=this.data.list.slice(this.data.i,this.data.i+10)
? ? ? this.setData({
? ? ? ? i:this.data.i + 10
? ? ? ? })
? ? ? ? this.data.result=this.data.result.concat(this.data.shoplist)
? ? ? ? this.setData({
? ? ? ? ? result:this.data.result
? ? ? ? })
? ? ? ? wx.hideLoading()
? ? ? ? this.setData({isloading:false})
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成
? ?*/
? onReady() {
? ? wx.setNavigationBarTitle({
? ? ? title: this.data.query.title,
? ? })
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示
? ?*/
? onShow() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
? ?*/
? onHide() {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
? ?*/
? onUnload() {
?
? },
?
? /**
? ?* 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶(hù)下拉動(dòng)作
? ?*/
? onPullDownRefresh() {
?
? },
?
? /**
? ?* 頁(yè)面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom() {
? ? if(this.data.isloading) return
? ? this.getshoplist()
? },
?
? /**
? ?* 用戶(hù)點(diǎn)擊右上角分享
? ?*/
? onShareAppMessage() {
?
? }
})2、json文件
{
? "usingComponents": {},
? "onReachBottomDistance": 200
}
3、wxml文件
<!--pages/shoplist/shoplist.wxml-->
<view wx:for="{{result}}" wx:key="id" class="shop-item">
? ? ?<image src="{{item.image}}" class="thumb"></image>
? <view class="shop-item-item">
? ? ?<view class="shop-title">商品名:{{item.name}}</view>
? ? ?<view>店鋪地址:{{item.address}}</view>
? ? ?<view>聯(lián)系電話(huà):{{item.tel}}</view>
? </view>
</view>4、wxss文件
/* pages/shoplist/shoplist.wxss */
.shop-item{
? display:flex;
? border: 1rpx solid rgb(216, 194, 194);
? border-radius: 50rpx;
? margin: 15rpx;
? box-shadow: 1rpx 1rpx 15rpx rgb(146, 102, 102);
}
.thumb
{
? width: 320rpx;
? height: 320rpx;
? display: block;
? margin-right: 15rpx;
? padding: 15rpx;
}
.shop-item-item
{
? display: flex;
? flex-direction: column;
? justify-content: space-around;
? font-size: 30rpx;
}
.shop-title
{
? font-weight: bold;
}以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序?qū)崙?zhàn)之上拉(分頁(yè)加載)效果(2)
- 微信小程序分頁(yè)加載的實(shí)例代碼
- 微信小程序云開(kāi)發(fā)實(shí)現(xiàn)數(shù)據(jù)添加、查詢(xún)和分頁(yè)
- 微信小程序模板之分頁(yè)滑動(dòng)欄
- 微信小程序?qū)崿F(xiàn)移動(dòng)端滑動(dòng)分頁(yè)效果（ajax）
- 微信小程序?qū)崿F(xiàn)分頁(yè)加載效果
- 微信小程序?qū)崿F(xiàn)瀑布流分頁(yè)滾動(dòng)加載
- 微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁(yè)效果的方法詳解
- 微信小程序之搜索分頁(yè)功能的實(shí)現(xiàn)代碼
- 微信小程序?qū)崿F(xiàn)分頁(yè)查詢(xún)?cè)斀?/a>
相關(guān)文章
本文主要介紹了JS批量替換內(nèi)容中關(guān)鍵詞為超鏈接，避開(kāi)已存在的鏈接和alt、title中的關(guān)鍵詞的方法。下面跟著小編一起來(lái)看下吧2017-02-02
JavaScript實(shí)現(xiàn)PC端橫向輪播圖
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)PC端橫向輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
柯里化是將接受多個(gè)參數(shù)的函數(shù)轉(zhuǎn)換成一系列只接受單個(gè)參數(shù)的函數(shù)的過(guò)程，而反柯里化是將柯里化函數(shù)轉(zhuǎn)換成接受多個(gè)參數(shù)的函數(shù)的過(guò)程，本文將帶大家理解 js 中的柯里化與反柯里化,需要的朋友可以參考下2023-07-07
JS回調(diào)函數(shù)的應(yīng)用簡(jiǎn)單實(shí)例
這篇文章主要分享了JS回調(diào)函數(shù)應(yīng)用的簡(jiǎn)單實(shí)例,比較實(shí)用，需要的朋友可以參考下2014-09-09
使用js在layui中實(shí)現(xiàn)上傳圖片壓縮
這篇文章主要介紹了使用js在layui中實(shí)現(xiàn)上傳圖片壓縮，layui 是一款采用自身模塊規(guī)范編寫(xiě)的前端 UI 框架,js上傳圖片壓縮百度有很多方法，,需要的朋友可以參考下2019-06-06
解決layui 表單元素radio不顯示渲染的問(wèn)題
今天小編就為大家分享一篇解決layui 表單元素radio不顯示渲染的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
uniapp定義動(dòng)畫(huà)的幾種方式總結(jié)
我們都知道,動(dòng)畫(huà)其實(shí)是由一幀一幀圖片組成,快遞地播放一組圖片就形成了動(dòng)畫(huà),下面這篇文章主要給大家介紹了關(guān)于uniapp定義動(dòng)畫(huà)的幾種方式,需要的朋友可以參考下2023-02-02
微信小程序?qū)崿F(xiàn)側(cè)邊導(dǎo)航欄
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)側(cè)邊導(dǎo)航欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
在做一些關(guān)于會(huì)員在線(xiàn)的問(wèn)題時(shí)，往往我們要根據(jù)覽器是否關(guān)閉來(lái)判斷用戶(hù)是否下線(xiàn)，然后再?gòu)膕ession和application中將此用戶(hù)移除，下面與大家分享下具體的捕捉方法2013-06-06
由于前端開(kāi)發(fā)的火熱和一些IT巨頭公司 對(duì) web前端開(kāi)發(fā)人員的需求旺盛，讓越來(lái)越多的人轉(zhuǎn)入前端。今天就為大家分享了一份Web前端開(kāi)發(fā)書(shū)單，希望大家喜歡2017-10-10