uni-app开发scroll-view下拉加载和滑动至底部加载

最新推荐文章于 2024-05-21 16:51:06 发布
最新推荐文章于 2024-05-21 16:51:06 发布
阅读量218 收藏
点赞数 1
文章标签： uni-app xcode ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44217374/article/details/135065474
版权 
<template>
	<view class="category">
		<searchBar style="margin-bottom: 10px;" @search="handleSearch"></searchBar>
		<view class="content">
			<scroll-view scroll-y class="left-aside">
				<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}" @click="tabtap(item)">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view scroll-with-animation scroll-y class="right-aside" :refresher-triggered="loading" refresher-enabled @refresherrefresh="handleRefresh" @scrolltolower="scrolltolower">
				<view class="s-list">
					<view @click="navToList(item.id)" class="s-item" v-for="item in slist" :key="item.id">
						<view class="item-left"><image :src="item.icon||'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20190519/default.png'"></image></view>
						<view class="item-right">
							<view class="item-title">
								<image v-if="item.type==='1'" class="item-type" src="@/static/otc-green.png"></image>
								<image v-if="item.type==='2'" class="item-type" src="@/static/otc-red.png"></image>
								<image v-if="item.type==='3'" class="item-type" src="@/static/rx-blue.png"></image>
								<span>{{ item.name }}</span><span> {{ item.guige }}</span>
							</view>
							<view class="sale-num">
								<span class="sale-type">活动款</span>
								<span class="sale-number">{{item.num}} 销量</span>
							</view>
							<view class="item-tag">
								<span class="item-tag-type">满减满赠</span>
								<span class="item-tag-type">加价购</span>
							</view>
							<view class="price">
								<span class="price-prefix">￥<span class="price-num">{{ item.price }}</span></span>
								<image class="car-logo" src="@/static/shopCar.png"></image>
							</view>
						</view>
					</view>
					<uni-load-more :status="status" :content-text="contentText"></uni-load-more>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import searchBar from '@/components/search-bar.vue'
	export default {
		components:{
			searchBar
		},
		data() {
			return {
				currentId: 0,
				flist: [
					{ name: '营养保健', id: 0 },
					{ name: '感冒咳嗽', id: 1 },
					{ name: '胃肠用药', id: 2 },
					{ name: '胃肠用药', id: 3 },
					{ name: '胃肠用药', id: 4 },
					{ name: '胃肠用药', id: 5 },
					{ name: '营养保健', id: 6 },
					{ name: '营养保健', id: 7 },
					{ name: '营养保健', id: 8 },
					{ name: '营养保健', id: 9 },
					{ name: '营养保健', id: 10 },
					{ name: '营养保健', id: 11 },
					{ name: '营养保健', id: 12 },
					{ name: '营养保健', id: 13 },
					{ name: '营养保健', id: 14 },
					{ name: '营养保健', id: 15 },
					{ name: '营养保健', id: 16 },
				],
				slist: [
					{ id: 0, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
					{ id: 1, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '2'  },
					{ id: 2, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '3'  },
					{ id: 3, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
					{ id: 4, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '3'  },
					{ id: 5, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
					{ id: 6, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
					{ id: 7, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
					{ id: 8, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
					{ id: 9, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
					{ id: 10, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
					{ id: 11, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
					{ id: 12, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
					{ id: 14, name: '小柴胡颗粒', guige: '2.5克*15袋', num: '800', price: '29.8', type: '1'  },
				],
				loading: false,
				status: 'more',
				reload: false,
				pageNum: 0,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
				searchValue: ''
			}
		},
		onLoad() {
			// this.getCategory() //联调放开
		},
		methods: {
			// 联调放开此方法
			// getData() {// 获取右侧列表数据
			// 	const params = {
			// 		// 左边类目id
			// 		currentId: this.currentId,
			// 		// 当前页数
			// 		pageNum: this.pageNum,
			// 		// 查询参数
			// 		searchValue: this.searchValue
			// 	}
			// 	请求地址(params).then(res => {
			// 		this.totalCount = res.data.total
			// 		// 如果是下拉重新加载数据
			// 		if(this.reload) {
			// 			this.closeLoading()
			// 		}
			// 		if (res.data.total > 0) {
			// 				const dataMap = res.data.list
			// 				this.slist = this.reload ? dataMap : this.slist.concat(dataMap);
			// 				this.reload = false;
			// 		} else {
			// 				this.slist = [];
			// 		}
			// 		if (this.totalCount == this.slist.length) {
			// 				this.reload = false;
			// 				this.status = 'noMore'
			// 		}
			// 	})
			// },
			// 获取左侧类目数据
			// getCategory() {
			// 	const params = {}
			// 	请求地址(params).then((res)=>{
			// 		this.flist = res.data
			// 		this.currentId = this.flist[0].id;
			// 		this.getData()
			// 	})
			// }
			//一级分类点击
			tabtap(item) {
				this.currentId = item.id;
				// this.getData() // 联调放开
			},
			navToList(sid) {
				uni.navigateTo({
					url: `/pages/product/product?id=41`
				})
			},
			// 滑动到底部加载数据
			scrolltolower() {
				// 联调放开此以下代码
				// if (this.totalCount > this.dataList.length) {
				// 	this.status = 'loading';
				// 	this.pageNum++
				// 	this.getData(); // 加载数据
				// } else {
				// 	//停止加载
				// 	this.status = 'noMore'
				// }
			},
			// 下拉刷新回调函数
			handleRefresh() {
				// this.reload = true
				// this.pageNum = 1
				// this.getData()
			},
			// 改变下拉刷新状态的显示与隐藏
			closeLoading() {
				if(!this.loading){
					this.loading = true; //下拉加载，先让其变true再变false才能关闭
					//关闭加载状态 (转动的圈)，需要一点延时才能关闭
					setTimeout(e =>{
						this.loading = false;
					},300)
				}
			},
			// 查询框回调
			handleSearch(v) {
				console.log('查询条件====》', v)
				this.searchValue = v
				// this.getData()
			}
		}
	}
</script>

<style lang='scss'>
	page {
		height: 100%;
	}
	.category {
		height: 100%;
		padding: 15px 15px 0 15px;
		background-color: #F5F7FA;
	}
	.content {
		height: calc(100% - 100upx);
		background-color: #f8f8f8;
	}

	.content {
		display: flex;
	}

	.left-aside {
		flex-shrink: 0;
		width: 150upx;
		height: 100%;
		background-color: #fff;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: #343434;
		position: relative;

		&.active {
			color: $base-color;
			background: rgba(57, 113, 254, .1);
			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		/* height: 300px; */
		/* overflow: hidden; */
	}

	.s-list {
		width: 100%;
		background: #fff;
		padding: 16upx;
	}

	.s-item {
		display: flex;
		/* height: 100px; */
		margin-bottom: 20px;
		.item-left {
			width: 200upx;
			image {
				width: 200upx;
				height: 200upx;
			}
			margin-right: 10px;
		}
		.item-right {
			flex: 1;
			.item-title {
				/* display: flex; */
				.item-type {
					width: 60upx;
					height: 30upx;
					margin-right: 8px;
					margin-bottom: -2px;
				}
			}
			.sale-num {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 5px 0;
				.sale-type {
					display: inline-block;
					padding: 0 8upx;
					height: 34upx;
					line-height: 34upx;
					font-size: 20upx;
					background: linear-gradient(90deg, #FF7F00 0%, #FF4300 100%);
					border-radius: 4rpx;
					color: #FFFFFF;
					text-align: center;
				}
				.sale-number {
					/* height: 30upx; */
					color: #999999;
				}
			}
			.item-tag {
				.item-tag-type {
					display: inline-block;
					padding: 0 8upx;
					height: 28upx;
					line-height: 28upx;
					text-align: center;
					font-size: 19upx;
					border: 1px solid #FE4F42;
					border-radius: 4rpx;
					color: #FE4F42;
					margin-right: 8upx;
				}
			}
			.price {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 5px;
				.price-prefix {
					color: #FF5000;
					font-size: 22upx;
					.price-num {
						font-size: 36upx;
						font-weight: bold;
					}
				}
				.car-logo {
					width: 60upx;
					height: 60upx;
				}
			}
		}
	}
</style>

浩然正气~~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序scroll-view下拉刷新(附带下拉刷新效果)
11-19
微信小程序scroll-view下拉刷新(附带下拉刷新效果) 使用说明 https://blog.csdn.net/u012308481/article/details/102619511
scroll-view的下拉刷新与触底加载
weixin_57400398的博客
07-17 475
scroll-view的下拉刷新及触底加载的实现
uni-app（vue3）实现对话界面，滚动条处于最下方！
weixin_48373171的博客
04-10 549
最近在做一个自己的全栈项目，前端用的，主要也是想巩固一下uni-app这方面的知识,其中有一个页面，涉及到ai聊天的功能，我理想型是类似文心一言或者微信聊天页面的效果，但是研究半天，发现uni-app的scroll-view这个内置组件并不能像写pc的滚动条那么灵活，因为在小程序或者app没有dom这个概念，网上找了一堆资源，基本上全是vue2版本的，密密麻麻的文字，真是看不下去，自己动手，丰衣足食。
（七）scroll-view 下拉加载
Luckyzhoufangbing的博客
08-15 904
html: <view> <!-- 下拉加载 1. lower-threshold 距底部触发的阀值 2. bindscrolltolower 触发函数 --> <view class="box"> <scroll-view class="wrapper" scroll-y lower-threshold="{{ 20 }}" bindscrolltolower="s.
微信小程序之scroll-view组件下拉刷新
专注前端技术，包括Web端、移动端、小程序、APP
06-24 8730
当使用了scroll-view组件之后，发现不能在该页面下拉刷新了。根本拉不动！ 经过五分钟的研究，解决了这个问题。我们可以自行定义下拉刷新。 加上该组件下拉刷新的属性及自己定义下拉事件。 <scroll-view refresher-enabled="true" bindrefresherrefresh="refresh" refresher-triggered="{{triggered}}"></scroll-view> refresher-enabled 开启自定义下拉刷新
基于uni-app开发的新闻和资讯类App模板
02-22
基于uni-app开发的新闻和资讯类App模板
uni-app 社交 下拉加载历史消息记录，滚动到下拉之前，不闪
05-19
社交应用中，onPullDownRefresh下拉加载历史消息，与页面上的消息合并，滚动到下拉之前，页面不闪
关于scroll-view和下拉刷新的那些坑
03-29
众所周知，小程序不支持操作dom元素，但最近公司做了这样的一个功能，滚动scrollview 标签，当页面滚动到一定的...scroll-view scroll-y="true" style="height: {{scrollViewHeight}}rpx;" bindscroll="scrollviewScrol
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
08-31
主要介绍了微信小程序 scroll-view实现上拉加载与下拉刷新的实例的相关资料,需要的朋友可以参考下
scroll-view实现自定义下拉刷新
qq_40666120的博客
08-28 3249
使用scroll-view标签 refresher-enabled=“true” 开启下拉刷新 refresher-triggered 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发 bindrefresherrefresh 自定义下拉刷新被触发事件 bindscrolltolower 滚动到底部触发事件 页面定义 <scroll-view class="content" style="width:100%;height:100vh;"
【微信小程序】scroll-view，让页面不能下拉刷新的原因
winrh的博客
06-03 6056
我用了scroll-view标签来作为整个页面的容器，内容多，方便浏览，这时就发现下拉刷新不了，所以怎样下拉刷新+页面支持下滑？ 答案是scroll-view改为view，height由100vh改为100%即可。至于下拉刷新的配置不用多讲吧。 json的 { "enablePullDownRefresh": true,//开启下拉刷新 } js的 onPullDown...
uniapp中实现保存图片，复制信息功能函数的封装
weixin_57031986的博客
05-15 246
uniapp中实现保存图片，复制信息功能函数的封装
uni-app 自定义图片按钮
浅醉樱花雨的专栏
05-18 753
uni-app自定义图片按钮
uni-app中SQLite数据库的配置与使用
paradoxaaa_的博客
05-18 164
1、在uni-app项目的manifest.json 将SQLite数据库模块打开。3、在需要操作数据库的vue文件中引用,下面是示例代码。
使用uniapp编写的微信小程序进行分包
最新发布
qq_45569925的博客
05-21 410
由于小程序发布的时候每个包最多只能放置2MB的东西，所以把所有的代码资源都放置在一个主包当中不显示，所以就需要进行合理分包，，但是分包后整个小程序最终不能超过20MB。一般情况下，我习惯将tabbar页面都放置在主包中，其余的相关页面都放置到对应的分到当中。比如：在我的界面可以点击之后进入到个人中心页面、订单页面、地址管理页面等等，那么这些页面我就会放置在package_home的分包当中。
uni-app 开发准备工作(一次开发，多端部署)
q322359的博客
05-16 249
uni-app是一个使用开发所有前端应用的框架，开发者编写，可）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uniapp h5项目切换导航栏及动态渲染按钮颜色
m0_72929120的博客
05-21 56
【代码】uniapp h5项目切换导航栏及动态渲染按钮颜色。
uniapp移动端骨架屏流程
m0_57005111的博客
05-16 214
然后把这两个文件中的代码粘贴到新创建的相应文件目录下；然后删除该页面中没用的代码以及做对应的（报错或者是类型错误，通常是把一些值做动态绑定）处理即可。1.使用微信开发者工具来生成骨架屏；在分窗模式下选择页面信息，下拉选择生成骨架屏；他会基于当前页面生成骨架屏的样式。2.判断数据是否加载完毕，未完成显示骨架屏；完成了就关闭骨架屏并渲染页面。会自动生成这两个文件；一个是html结构文件，一个是css样式文件。
uni-app scroll-view组件实现下拉刷新
09-23
在uni-app中，可以使用scroll-view组件来实现下拉刷新功能。为了实现下拉刷新，你可以遵循以下步骤： 1. 将scroll-view组件放置在需要下拉刷新功能的页面中。 2. 设置scroll-view的scroll-y属性为true，以启用垂直...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值