uni-app 129删除收藏功能

最新推荐文章于 2024-04-16 11:45:50 发布

2019ab

最新推荐文章于 2024-04-16 11:45:50 发布

阅读量273

点赞数

分类专栏： uni-app 文章标签： javascript 前端 uni-app

本文链接：https://blog.csdn.net/ab15176142633/article/details/121355573

版权

uni-app 同时被 3 个专栏收录

162 篇文章 15 订阅

订阅专栏

node.js

142 篇文章 4 订阅

订阅专栏

vue

139 篇文章 1 订阅

订阅专栏

这是一个关于Vue.js组件化的实现案例，展示了如何创建一个个人收藏页面。页面包括导航栏、内容列表和上拉加载功能。内容列表中根据数据类型动态渲染文本、图片和视频，同时支持长按操作来删除收藏项。代码结构清晰，结合免费组件库完成交互，如免费导航栏和图片组件。页面在用户滚动到底部时自动加载更多数据。

摘要由CSDN通过智能技术生成

下图是我测试的截图

在这里插入图片描述

/pages/my/fava/fava.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<free-nav-bar title="我的收藏" showBack :showRight="false"></free-nav-bar>
		<view class="pt-3 px-3" v-for="(item,index) in list" :key="index" @longpress="long(item,index)">
			<view class="bg-white rounded p-3">
				<text v-if="item.type == 'text'">{{item.data}}</text>
				<free-image v-else-if="item.type == 'image' || item.type == 'emoticon'" :src="item.data"></free-image>
				<!-- <video  :src="item.data"  controls style="width: 500rpx;height: 400rpx;" controls></video> -->
				<video v-else-if="item.type == 'video'" :poster="item.options.poster" :src="item.data" controls></video>
			</view>
		</view>
		
		<!-- 上拉加载 -->
		<view class="flex align-center justify-center py-5 bg-light" v-if="list.length >= 10">
		     <text class="text-muted font">{{loadmore}}</text>
		</view>
	</view>
</template>

<script>
	import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
	import freeImage from '@/components/free-ui/free-image.vue';
	import $H from '@/common/free-lib/request.js';
	export default {
		components:{
			freeNavBar,
			freeImage
		},
		data() {
			return {
				page:1,
				list:[],
				loadmore:'上拉加载中', // 没有更多了 加载中...
			}
		},
		onLoad() {
			this.page = 1;
			this.getData();
		},
		onPullDownRefresh() {
			this.page = 1;
			this.getData().then(res=>{
				uni.stopPullDownRefresh(); // 关闭下拉刷新状态
			})
		},
		onReachBottom() {
			this.page+=1;
			this.getData().catch(err=>{
				this.page -= 1;
			})
		},
		methods: {
			long(item,index){
				uni.showActionSheet({
					itemList: ['删除'],
					success: res => {
						if(res.tapIndex !== 0) return;
						uni.showModal({
							content: '是否要删除该收藏？',
							success: res => {
								if(res.cancel){
									return;
								}
								$H.post('/fava/destroy',{
									id:item.id
								}).then(res=>{
									uni.showToast({
										title:'删除成功',
										icon:'none'
									});
									this.list.splice(index,1);
								})
							},
							fail: () => {},
							complete: () => {}
						});
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getData(){
				return new Promise((result,reject)=>{
					$H.get('/fava/'+this.page).then(res=>{
						let list = res.map(item=>{
							item.options = JSON.parse(item.options);
							return item;
						});
						this.list = this.page === 1 ? list : [...this.list,...list];
						this.loadmore = this.list.length == this.page * 10 ? '上拉加载更多' : '没有更多了';
						result(res);
					}).catch(err=>{
						reject(err);
					})
				})
			}
		}
	}
</script>

<style>

</style>