ユニアプリプロジェクトの製品リストのプルダウンリフレッシュとプルアップロード

ユニアプリプロジェクトの製品リストのプルダウンリフレッシュとプルアップロード

ユニアプリプロジェクトのアイテムリストのプルアップは、より多くをロードします

Goods.vue

<template>
	<view class="goods_wrap">
		<view class="goods_list">
			<view class="goods_list_item" v-for="item in shopList">
				{
    
    {
    
     item.title}}
			</view>
		</view>
		<view class="isOver" v-if="isOverFlag">
			----我是有底线的----
		</view>
	</view>

</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				shopList:[],
				pageIndex:1,
				isOverFlag:false,
			}
		},
		onLoad() {
    
    
			this.getShopList();
		},
		// 触底触发
		onReachBottom() {
    
    
			console.log("触底触发", this.shopList.length);
			// 先判断是否有下一页的数据
			if ( this.shopList.length < this.pageIndex * 10) return this.isOverFlag = true;
			this.pageIndex++
			this.getShopList();
		},
		methods: {
    
    
			// 获取商品列表
			async getShopList(){
    
    
				const res = await this.$myHttp({
    
    
					url:"/shopList?pageIndex=" + this.pageIndex,
				})
				// 获取商品数据 
				this.shopList = [...this.shopList,...res.data];
			},
		}
	}
</script>

<style lang="scss">
	.goods_wrap{
    
    
		height: 100%;
		width: 100%;
		background: pink;
		.goods_list {
    
    
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 15rpx;
			.goods_list_item {
    
    
				box-sizing: border-box;
				margin-bottom: 15rpx;
				background: #fff;
				width: 355rpx;
				height: 400rpx;
				line-height: 400rpx;
				text-align: center;
			}
		}
		.isOver {
    
    
			width: 100%;
			text-align: center;
		}
	}
</style>

効果

ユニアプリプロジェクトのアイテムリストのドロップダウン更新

Goods.vue

<template>
	<view class="goods_wrap">
		<view class="goods_list">
			<view class="goods_list_item" v-for="item in shopList">
				{
    
    {
    
     item.title}}
			</view>
		</view>
		<view class="isOver" v-if="isOverFlag">
			----我是有底线的----
		</view>
	</view>

</template>

<script>
	export default {
    
    
		data() {
    
    
			return {
    
    
				shopList:[],
				pageIndex:1,
				isOverFlag:false,
			}
		},
		onLoad() {
    
    
			this.getShopList();
		},
		// 触底触发
		onReachBottom() {
    
    
			console.log("触底触发", this.shopList.length);
			// 先判断是否有下一页的数据
			if ( this.shopList.length < this.pageIndex * 10) return this.isOverFlag = true;
			this.pageIndex++
			this.getShopList();
		},
		// 下拉刷新了
		onPullDownRefresh(){
    
    
			console.log("下拉刷新了");
			this.pageIndex = 1;
			this.shopList = [];
			this.isOverFlag = false;
			setTimeout(()=> {
    
    
				this.getShopList(()=>{
    
    
					uni.stopPullDownRefresh(); // 关闭下拉刷新
				});
			}, 1000 )
			
		},
		methods: {
    
    
			// 获取商品列表
			async getShopList(callBack){
    
    
				const res = await this.$myHttp({
    
    
					url:"/shopList?pageIndex=" + this.pageIndex,
				})
				// 获取商品数据 
				this.shopList = [...this.shopList,...res.data];
				callBack && callBack()
			},
		}
	}
</script>

<style lang="scss">
	.goods_wrap{
    
    
		height: 100%;
		width: 100%;
		background: pink;
		.goods_list {
    
    
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			padding: 0 15rpx;
			.goods_list_item {
    
    
				box-sizing: border-box;
				margin-bottom: 15rpx;
				background: #fff;
				width: 355rpx;
				height: 400rpx;
				line-height: 400rpx;
				text-align: center;
			}
		}
		.isOver {
    
    
			width: 100%;
			text-align: center;
		}
	}
</style>

pages.json

• 「enablePullDownRefresh」：true //

{
    
    
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
    
    
			"path": "pages/index/index"
		}
	  ,{
    
    
            "path" : "pages/cart/cart"
        }
        ,{
    
    
            "path" : "pages/member/member"
        }
        ,{
    
    
            "path" : "pages/news/news"
        }
        ,{
    
    
            "path" : "pages/goods/goods",
						"style": {
    
    
							"enablePullDownRefresh":true// 开启下拉刷新
						}
        }
        ,{
    
    
            "path" : "pages/contact/contact"
        }
        ,{
    
    
            "path" : "pages/pics/pics"
        }
        ,{
    
    
            "path" : "pages/learn/learn"
        }
    ],
	"globalStyle": {
    
    
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "xzl-商场",
		"navigationBarBackgroundColor": "#b50e03",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar":{
    
    
		"selectedColor":"#b50e03",
			"list":[
				{
    
    
					"text":"首页",
					"pagePath":"pages/index/index",
					"iconPath":"static/icon/home.png",
					"selectedIconPath":"static/icon/home-active.png"
				},
				{
    
    
					"text":"新闻",
					"pagePath":"pages/news/news",
					"iconPath":"static/icon/news.png",
					"selectedIconPath":"static/icon/news-active.png"
				},
				{
    
    
					"text":"购物车",
					"pagePath":"pages/cart/cart",
					"iconPath":"./static/icon/cart.png",
					"selectedIconPath":"static/icon/cart-active.png"
				},
				{
    
    
					"text":"会员",
					"pagePath":"pages/member/member",
					"iconPath":"static/icon/member.png",
					"selectedIconPath":"static/icon/member-active.png"
				}
			]
		}
}

効果

• 引き上げる