uni-app 149我的朋友圈分页列表实现

Posted 2022-01-07 2019ab

下图是我测试的截图

/pages/find/moments/moments.vue

<template>
	<view>
		<free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar>
		<view class="position-relative" style="height: 620rpx;">
			<image src="https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/shengchengqi/datapic/1.jpg" mode="aspectFill" style="height: 590rpx;" class="bg-secondary w-100"></image>
			<image :src="user.avatar || '/static/images/demo/demo6.jpg'" style="width: 120rpx;height:120rpx;right: 30rpx;" mode="" class="bg-secondary rounded position-absolute bottom-0"></image>
			<text class="text-white font-md position-absolute" style="bottom: 45rpx;right: 160rpx">user.nickname || user.username</text>
		</view>
		
		<!-- 朋友圈列表样式 -->
		<free-moment-list v-for="(item,index) in list" :key='index' :item="item" :index="index" @action="doAction"></free-moment-list>
		
		<!-- 评论框 -->
		<free-popup ref="action" bottom transformOrigin="center bottom">
			<view style="height: 105rpx;" class="bg-light border-top flex align-center">
				<textarea fixed class="bg-white rounded p-2 font-md" style="height: 75rpx;width: 520rpx;" value="" placeholder=""  v-model="content" :focus="true"/>
				<free-icon-button @click="changeFaceModeal"><text class="iconfont font-lg">&#xe605;</text></free-icon-button>
				<free-main-button name="发送" :disabled="content.length===0" @click="send"></free-main-button>
			</view>
			
			<!-- 表情包 -->
			<scroll-view v-if="faceModal" scroll-y="true" style="height: 350rpx;" class="bg-light flex flex-wrap">
				<view class="flex align-center justify-center" hover-class="bg-white" style="width:107rpx;height:107rpx;" v-for="(item,index) in faceList" :key="index" @click="addFace(item)">
					<text>item</text>
				</view>
			</scroll-view>
		</free-popup>
		
		<!-- 上拉加载 -->
		<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 freeTransparentBar from '@/components/free-ui/free-transparent-bar.vue';
	import freeMomentList from '@/components/free-ui/free-moment-list.vue';
	import freePopup from '@/components/free-ui/free-popup.vue';
	import freeIconButton from '@/components/free-ui/free-icon-button.vue';
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	import $H from '@/common/free-lib/request.js';
	import  mapState  from 'vuex';
	export default 
		components:
			freeTransparentBar,
			freeMomentList,
			freePopup,
			freeIconButton,
			freeMainButton
		,
		data() 
			return 
				content:'',
				scrollTop:0,
				faceModal:false,
				faceList:["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😇","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","😲","😷","😖","😞","😟","😤","😢","😭","😦","😧","😨","😬","😰","😱","😳","😵","😡","😠"],
				commentIndex:-1,
				page:1,
				loadmore:'上拉加载更多',
				key:'moment_timeline',
				list:[],
			
		,
		onPageScroll(e) 
			this.scrollTop = e.scrollTop;
		,
		onReachBottom() 
			if(this.loadmore !== '上拉加载更多')
				return;
			
			this.page += 1;
			this.loadmore = '加载中...';
			this.getData().catch(err=>
				this.page -= 1;
				uni.showToast(
					title:'加载失败',
					icon:'none'
				);
				this.loadmore = '上拉加载更多';
			)
		,
		onLoad(e) 
			if(e.key)
				this.key  = e.key;
			
			this.page = 1;
			this.getData();
		,
		onPullDownRefresh() 
			this.page = 1;
			this.getData().then(res=>
				uni.showToast(
					title:'刷新成功',
					icon:'none'
				);
				uni.stopPullDownRefresh();
			).catch(err=>
				uni.showToast(
					title:'刷新失败',
					icon:'none'
				);
				uni.stopPullDownRefresh();
			);
		,
		computed:
			...mapState(
				user:state=>state.user.user
			)
		,
		methods: 
			// 点击操作菜单
			doAction(e)
				uni.showActionSheet(
					itemList: ['点赞','评论'],
					success: res => 
						if(res.tapIndex === 0)
							// 点赞
							this.doSupport(e)
						else
							this.content='';
							this.faceModal=false;
							this.commentIndex = e.index;
							this.$refs.action.show();
							// this.doComment(e)
						
					
				);
			,
			// 获取数据
			getData()
				return new Promise((result,reject)=>
					let page = this.page;
					$H.get('/'+this.key+'/'+page).then(res=>
						this.list = page === 1 ? res : [...this.list,...res];
						this.loadmore = this.list.length === (page * 10) ? '上拉加载更多' : '没有更多了'
						result(res);
					).catch(err=>
						reject(err);
					)
				)
			,
			// 点赞
			doSupport(e)
				e.item.supports.push(
						id:1,
						username:'昵称',
						avatar:'/static/image/demo/demo6.jpg'
				);
			,
			// 添加表情
			addFace(item)
				this.content += item;
			,
			// 开启关闭表情包面板
			changeFaceModeal()
				uni.hideKeyboard();
				setTimeout(()=>
					this.faceModal = !this.faceModal;
				,100);
			,
			// 发送
			send()
				this.list[this.commentIndex].comments.push(
					id:1,
					username:'昵称',
					content:this.content
				)
				this.$refs.action.hide();
			,
			// 选择发表朋友圈类型
			clickRight()
				let list = [
					name:'图文',
					key:'image'
				,
				
					name:'视频',
					key:'video'
				,
				
					name:'文字',
					key:'text'
				];
				uni.showActionSheet(
					itemList:list.map(v=>v.name),
					success:res=>
						uni.navigateTo(
							url: '../add-moment/add-moment?type='+list[res.tapIndex].key,
						);
					
				)
			
		,
	
</script>

<style>

</style>

/pages/tabbar/my/my.vue

<template>
	<view class="page">
		<free-nav-bar bgColor="bg-white">
			<free-icon-button slot="right"><text class="iconfont font-md">&#xe6ed;</text></free-icon-button>
		</free-nav-bar>
		
		<free-list-item :cover="user.avatar ? user.avatar : '/static/images/userpic.png'" :title="nickname" showRight coverSize="120" @click="open('my/userinfo/userinfo')">
			<view class="flex flex-column">
				<text class="text-dark font-lg font-weight-bold">nickname</text>
				<text class="text-light-muted font-md">微信号：user.username</text>
			</view>
			<view slot="right">
				<text class="iconfont font-md text-light-muted">&#xe614;</text>
			</view>
		</free-list-item>
		
		<free-divider></free-divider>
		<free-list-item title="支付" showRight>
			<text slot="icon" class="iconfont font-lg py-1">&#xe66c;</text>
		</free-list-item>
		
		<free-divider></free-divider>
		<free-list-item title="收藏" @click="open('my/fava/fava')" showRight>
			<text slot="icon" class="iconfont font-lg py-1">&#xea2d;</text>
		</free-list-item>
		<free-list-item title="相册"  @click="open('find/moments/moments?key=moment')" showRight>
			<text slot="icon" class="iconfont font-lg py-1">&#xe608;</text>
		</free-list-item>
		<free-list-item title="表情" showRight>
			<text slot="icon" class="iconfont font-lg py-1">&#xe605;</text>
		</free-list-item>
		<free-list-item title="设置" showRight @click="open('my/setting/setting')">
			<text slot="icon" class="iconfont font-lg py-1">&#xe612;</text>
		</free-list-item>
	</view>
</template>

<script>
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
	import freeIconButton from "@/components/free-ui/free-icon-button.vue";
	import freeListItem from "@/components/free-ui/free-list-item.vue";
	import freeDivider from "@/components/free-ui/free-divider.vue";
	import auth from '@/common/mixin/auth.js';
	import  mapState  from 'vuex';
	export default 
		mixins:[auth],
		components:
			freeNavBar,
			freeIconButton,
			freeListItem,
			freeDivider
		,
		data() 
			return 
				
			
		,
		computed:
			...mapState(
				user:state=>state.user.user,
			),
			nickname()
				return this.user.nickname ? this.user.nickname : this.user.username;
			
		,
		methods: 
			open(path)
				uni.navigateTo(
					url:'/pages/'+path,
				)
			
		
	
</script>

<style>

</style>

感谢大家观看，我们下次见