uni-app 148朋友圈列表分页功能实现

最新推荐文章于 2024-08-27 15:12:13 发布
最新推荐文章于 2024-08-27 15:12:13 发布
阅读量319 收藏
点赞数
分类专栏： uni-app 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ab15176142633/article/details/121520045
版权
uni-app 同时被 3 个专栏收录
162 篇文章 15 订阅
订阅专栏
node.js
142 篇文章 4 订阅
订阅专栏
vue
139 篇文章 1 订阅
订阅专栏

下图是我测试的截图

在这里插入图片描述

/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:'上拉加载更多',
				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() {
			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('/moment_timeline/'+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>

/components/free-ui/free-moment-list.vue

<template>
	<view class="p-3 flex align-start border-bottom border-light-secondary">
		<free-avatar :src='item.avatar' size="80"></free-avatar>
		<view class="pl-2 flex-1 flex flex-column">
			<!-- 昵称 -->
			<text class="font-md text-hover-primary">{{item.user_name}}</text>
			<!-- 内容 -->
			<text v-if="item.content" class="font-md text-dark mb-1">{{item.content}}</text>
			<!-- 图片 -->
			<view v-if="item.image.length" class="py-2 flex flex-wrap">
				<block v-for="(image,imageIndex) in item.image" :key='imageIndex'>
					<!-- 单图 -->
					<free-image v-if="item.image.length==1" :src="item.image[imageIndex]" imageClass='rounded' @click="preview(image)"></free-image>
					<free-image v-else :src="item.image[imageIndex]" imageClass='rounded' mode="aspectFill" style="width: 180rpx;height: 180rpx;" class="bg-secondary mr-2 mb-2" @click="preview(image)"></free-image>
				</block>
			</view>
			<!-- 视频 -->
			<view class="py-2" v-if="item.video">
				<video :src="item.video.src" :poster="item.video.poster" controls style="height: 300rpx;width: 500rpx;" loop></video>
			</view>
			<!-- 时间|操作 -->
			<view class="flex align-center justify-between">
				<text class="font-sm text-light-muted">{{item.created_at|formatTime}}</text>
				<view class="rounded p-1 bg-light" @click="$emit('action',{item,index})">
					<text class="text-hover-primary iconfont font">&#xe62a;</text>
				</view>
			</view>
			<!-- 点赞列表，评论列表 -->
			<view class="bg-light mt-2" v-if="item.likes.length || item.comments.length">
				<!-- 点赞 -->
				<view v-if="item.likes.length" class="border-bottom flex align-start p-2">
					<text class="flex-shrink iconfont font text-hover-primary">&#xe637;</text>
					<view class="flex flex-wrap flex-1 ml-1">
						<text v-for="(s,si) in item.likes" :key='si' class="font text-hover-primary ml-1">{{s.name}}</text>
					</view>
				</view>
				<!-- 评论 -->
				<view v-if="item.comments.length" class="border-bottom flex align-start p-2">
					<text class="flex-shrink iconfont font-md text-hover-primary">&#xe64e;</text>
					<view class="flex flex-column flex-wrap flex-1 ml-2">
						<view class="flex" v-for="(c,ci) in item.comments" :key="ci">
							<text class="text-hover-primary font">{{c.user.name}}:</text>
							<text class="font text-dark flex-1">{{c.content}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeAvatar from '@/components/free-ui/free-avatar.vue';
	import freeImage from '@/components/free-ui/free-image.vue';
	import $T from '@/common/free-lib/time.js';
	export default {
		components:{
			freeAvatar,
			freeImage
		},
		filters:{
			formatTime(value){
				return $T.gettime(value);
			}
		},
		props:{
			item:Object,
			index:Number
		},
		methods:{
			// 查看大图
			preview(src){
				uni.previewImage({
					current:src,
					urls:this.item.image
				})
			}
		}
	}
</script>

<style>
</style>

/pages.json

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
	{
	    "path" : "pages/common/login/login",
	    "style" :                                                                                    
	    {
	        "navigationBarTitleText": "",
	        "enablePullDownRefresh": false
	    }
	    
	},
		{
			"path": "pages/tabbar/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"disableScroll": true // 不嵌套 scroller
			}
		}
	    ,{
            "path" : "pages/tabbar/find/find",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/tabbar/my/my",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/tabbar/mail/mail",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/chat/chat",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/video/video",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/chat-set/chat-set",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/user-base/user-base",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/user-tag-set/user-tag-set",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/user-remark-tag/user-remark-tag",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/user-moments-auth/user-moments-auth",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/send-card/send-card",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/user-report/user-report",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/find/moments/moments",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": true
            }
            
        }
        ,{
            "path" : "pages/my/userinfo/userinfo",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/code/code",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/fava/fava",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": true
            }
            
        }
        ,{
            "path" : "pages/common/search/search",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/find/add-moment/add-moment",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/my/setting/setting",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/add-friend/add-friend",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/apply-list/apply-list",
            "style" : 
            {
                "enablePullDownRefresh": true
            }
            
        }
        ,{
            "path" : "pages/mail/mail/mail",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mail/group-list/group-list",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/group-remark/group-remark",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/chat/chat-list/chat-list",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"globalStyle":{
		"navigationBarTextStyle":"black",
		"navigationBarTitleText":"微信",
		"navigationBarBackgroundColor":"#F8F8F8",
		"backgroundColor":"#F8F8F8",
		"app-plus":{
			"titleNView":false,
			"scrollIndicator":"none"
		}
	},
	"tabBar":{
		"borderStyle":"black",
		"backgroundColor":"#F7F7F7",
		"color":"#000000",
		"selectedColor":"#08C261",
		"list":[
			{
				"iconPath":"./static/tabbar/index.png",
				"selectedIconPath":"./static/tabbar/index-select.png",
				"pagePath":"pages/tabbar/index/index",
				"text":"首页"
			},
			{
				"iconPath":"./static/tabbar/mail.png",
				"selectedIconPath":"./static/tabbar/mail-select.png",
				"pagePath":"pages/tabbar/mail/mail",
				"text":"通讯录"
			},
			{
				"iconPath":"./static/tabbar/find.png",
				"selectedIconPath":"./static/tabbar/find-select.png",
				"pagePath":"pages/tabbar/find/find",
				"text":"发现"
			},
			{
				"iconPath":"./static/tabbar/my.png",
				"selectedIconPath":"./static/tabbar/my-select.png",
				"pagePath":"pages/tabbar/my/my",
				"text":"我的"
			}
		]
	},
	"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize",
	"condition" : { //模式配置，仅开发期间生效
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}
}

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

2019ab
关注
专栏目录
uniapp实现分页功能
LW0512的博客
10-27 1042
uniapp实现分页功能。
uni-app列表项实现左划操作功能
02-25
本教程将详细讲解如何在uni-app框架中实现列表项的左划操作功能，让你的应用更加易用且富有动态性。 uni-app是一个基于Vue.js开发的多端框架，它允许开发者编写一次代码，就能在iOS、Android、H5等多个平台上运行。...
uni-app 146朋友圈列表api开发
善假于物
12-16 326
router.js // 朋友圈列表 router.get('/moment_timeline/:page',controller.moment.timeline); app/controller/moment.js // 朋友圈列表 async timeline() { const { ctx, app } = this; let current_user_id = ctx.authUser.id; let pag.
uni-app中分页器的实现
最新发布
weixin_51480428的博客
08-27 616
刚进页面的时候，接收上一个页面传递过来的查询参数，此时调用后端查询接口，这时候的pageSize和pageNum值是固定的，默认查询第一页，同时将数据总条数设置给total，组件会自动根据你设置的pageSize大小和后端查询出的total计算出总的页数。后面就是用户点击上一页或者下一页按钮来触发change函数，传来当前的页数，你再去调用接口查询当前页码的数据即可。
uni-app 实现分页功能
weixin_45830334的博客
03-30 1万+
从Dclould下载的插件 链接:简单实用的分页器 - DCloud 插件市场 <!-- 分页 --> <page-pagination v-show="show" :total="page.total" :showAround="true" :btnText="true" :forceEllipses="true" @change="change"> </page-pagination> data() { return { page: { tot.
在uniapp中写一个简单的分页功能
qq_45625778的博客
04-10 1083
如果是使用的Vscode编译器，自己百度搜下咋npm，暂时没用到。
uni-app实现点赞评论功能
10-15
在uni-app中实现点赞评论功能是一项常见的需求，它涉及到用户交互和数据的动态更新。uni-app是一个使用Vue.js开发所有端的框架，可以方便地构建跨平台的应用。本篇文章将详细解析如何在uni-app中实现这个功能。 ...
uni-app登录实例的实现
10-29
总的来说，uni-app结合HBuilderX为开发者提供了高效且便捷的开发环境，实现登录功能并不复杂。通过理解uni-app的组件、API以及网络请求机制，开发者可以快速搭建起一个功能完善的登录系统。同时，不断学习和实践，...
uni-app实现select标签功能
04-27
在uni-app中实现类似html的select标签功能。选中数据后，会在下面显示出所选的数据，点删除之后，对应的选中状态也清除
uni-app uni-data-picker 省市区数据表
06-16
<uni-data-picker> 是一个选择类datacom组件。支持多列级联选择。列数没有限制，如果屏幕显示不全，顶部tab区域会左右滚动。 适用于uni-app使用uni-data-picker实现省市区选择器的json数据
（源代码）第03讲：uni-pagination实现表格分页查询
04-26
第03讲：uni-pagination实现表格分页查询
uni-app之实现分页
s_156的博客
09-24 3696
一、下载库 官方文档地址为: https://ext.dcloud.net.cn/plugin?id=32 点击下载zip压缩包即可，下载完毕后解压到放置前端相关组件目录,即components目录。 二、使用 1.引入 import uniPagination from '../../components/uni-pagination/uni-pagination/uni-pagination.vue' 2.模板区域使用(在里) <uni-pagination @change="handlePag
uniapp实现分页
weixin_64978272的博客
08-25 648
HBuilder先安装分页插件。
uni-app微信小程序scroll-view自定义下拉刷新
热门推荐
僵小蛋的博客
04-29 2万+
如果你需要自定义下拉刷新，那么使用page级别的下拉刷新是无法定制样式的，微信提供了scroll-view来支持用户自定义下拉刷新，先看文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html 用uni-app开发，可以封装成vue组件，比较方便： <template> <!...
实现微信朋友圈动态列表
weixin_34257076的博客
01-03 626
前言 项目中需要实现类似朋友圈动态的列表，需要用到图文混排，正好可以使用ibireme大神的开源控件YYText实现这种效果，在这里记录一下使用过程中遇到的问题，参考文章iOS 保持界面流畅的技巧。 布局 列表中的主要布局如下图所示，预先将每个cell的高度计算出来，并且将高度缓存下来，不重复计算高度。ibireme实现的微博列表Demo写的已经很清晰了，这里主要写下自己在使用时，遇到的一些问题...
uni-app中实现列表滑动分页加载功能
不懂前端的小韩的博客
07-12 3433
uni-app中实现列表滑动分页加载功能
uni-app 即时聊天：朋友圈
ym深的博客
11-11 2482
在写uni-app即时聊天项目的时候，就想着用uni-app实现微信朋友圈的功能，在完成这些功能的时候，也遇到了很多的问题，比如数据表的设计（个人动态表，朋友圈动态表，通知表等），因为也是第一次去制作这种功能，所以可能在思路上还是有所不足的，以下代码仅供参考，如果有更好的方式，请大佬们提出来（可在评论区留言） 功能设计简图 关于个人动态的操作 个人动态表的部分操作会导致朋友圈动态表的改变，例如发布动态和删除动态 关于朋友圈动态的操作 表设计 个人动态表 const mongoose = req.
uni-app：实现分页功能，单击行获取此行指定数据，更改行样式
weixin_46001736的博客
08-01 861
uni-app：实现分页功能，单击行获取此行指定数据，更改行样式
用uni-app 实现txt文件分页功能
04-08
可以通过uni-app提供的组件和API实现txt文件分页功能。首先，使用uni-app提供的文件系统API读取txt文件内容，然后根据设定的每页显示行数，将内容分页并在页面上展示。可以使用uni-app提供的scroll-view组件实现分页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

2019ab

你的鼓励就是我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值