下图是我测试的截图
/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"></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"></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"></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"></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函数里面得到 } ] } }
感谢大家观看，我们下次见
