从零用java实现 小红书 springboot vue uniapp （5）购物页聊天页
前言
移动端演示 http://8.146.211.120:8081/#/
前面的文章我们基本完成了个人中心页开发
今天我们具体的去进行实现购物页 聊天页 并且分享我开发时遇到的问题
首先先看效果
商品页
商品数据先用笔记数据
我们对布局整体规划一下
搜索组件
搜索组件是fiexd布局一直在页面的最上方
所以在他后面我们需要有一个空的布局占位
吸顶导航
吸顶导航我们还使用我的页面 相似的解决办法
但是由于有展开选择的组件 返回页面重新计算高度时会错位
所以我们把所有的高度都提前计算好
这里还有一个小细节
点击展开是 页面会自动滚动到吸顶高度
当页面 高于吸顶高度时则不滚动（参考小红书）
showMenu : function () {
console.log(this.isFixed)
if(!this.isFixed){
console.log('动态置顶')
uni.pageScrollTo({
scrollTop: 140.375,
duration: 0
});
}
uni.createSelectorQuery().in(this).select('#menuMain').fields(
{rect: true}, (res) => {
this.top = res.top - 1;
this.show = true;
this.$emit('showMenu');
}
).exec();
},
其他细节需要等到拿到真实商品数据进行完善 静态页面已经开发完毕
聊天页
聊天页面很简单 就是一个列表
整体页面是scroll view 里面是卡片布局
但是在滑动时 会触发点击操作 这个一直还无法解决
<template>
<gui-page
class="gui-bg-white"
:fullPage="true"
:isLoading="pageLoading"
ref="guiPage">
<template
v-slot:gBody>
<view
class="gui-flex1 gui-flex gui-column">
<view
class="gui-flex1 gui-relative">
<gui-xhs-slide-list
class="gui-flex1"
:msgs="msgs"
@itemTap="itemTap"
@btnTap="btnTap"
@scrolltolower="loadMore"
ref="guiSlideList"></gui-xhs-slide-list>
</view>
</view>
<gui-action-sheet
height=180
ref="guiactionsheet"
@selected="selected"
:items="actionSheetItems"></gui-action-sheet>
</template>
</gui-page>
</template>
<script>
// 模拟个 api 请求的数据
var face = "http://8.146.211.120:8080/upload/notes/cat.jpg";
var msgsFromApi = [
{
img : face,
msgnumber : 8,
title : "哒哒吃肉肉",
time : "2024-12-17 21:10:08",
content : "消息内容 ..."
},
{
img : face,
msgnumber : 0,
title : "哒哒吃肉肉",
time : "2024-12-16 21:10:08",
content : "语音消息"
},
{
img : face,
msgnumber : 12,
title : "哒哒吃肉肉",
time : "2024-12-15 21:10:08",
content : "图片消息"
},
{
img : face,
msgnumber : 1,
title : "哒哒吃肉肉",
time : "2024-12-14 21:10:08",
content : "系统消息"
},
{
img : face,
msgnumber : 8,
title : "哒哒吃肉肉",
time : "2024-12-13 21:10:08",
content : "消息内容 ..."
},
{
img : face,
msgnumber : 0,
title : "哒哒吃肉肉",
time : "2024-12-12 21:10:08",
content : "语音消息"
},
{
img : face,
msgnumber : 12,
title : "哒哒吃肉肉",
time : "2024-12-11 21:10:08",
content : "图片消息"
},
{
img : face,
msgnumber : 1,
title : "哒哒吃肉肉",
time : "2024-12-10 21:10:08",
content : "系统消息"
},
{
img : face,
msgnumber : 8,
title : "哒哒吃肉肉",
time : "2024-12-09 10:00:00",
content : "消息内容 ..."
},
{
img : face,
msgnumber : 0,
title : "哒哒吃肉肉",
time : "2024-12-08 10:00:00",
content : "语音消息"
},
{
img : face,
msgnumber : 12,
title : "哒哒吃肉肉",
time : "2024-12-07 10:00:00",
content : "图片消息"
},
{
img : face,
msgnumber : 1,
title : "哒哒吃肉肉",
time : "2024-12-06 10:00:00",
content : "系统消息"
}
];
export default {
data() {
return {
actionSheetItems : ['置顶聊天','删除'],
msgs : [],
pageLoading : true
}
},
onLoad:function(){
// 模拟 api 请求，因为请求数据里没有按钮信息我们利用js进行按钮补充
setTimeout(() => {
for(let i = 0; i < msgsFromApi.length; i++){
// 具体几个按钮及按钮文本根据项目需求来，格式 {name:按钮文本, bgColor:按钮背景色}
msgsFromApi[i].btns = [
{'name':'标为已读', bgColor:'#323232'},
{'name':'删除消息', bgColor:'#FF0036'},
];
msgsFromApi[i].time = uni.app.formatDate(msgsFromApi[i].time)
}
this.msgs = msgsFromApi;
this.pageLoading = false;
}, 500);
},
methods:{
selected : function(index){
console.log(index);
// 返回索引，可以根据索引获取文本数据
},
btnTap : function(index, btnIndex){
console.log(index, btnIndex);
// 第一个按钮被点击 [ 标记已读 ]
if(btnIndex == 0){
if(this.msgs[index].btns[0].name == '标为已读'){
this.msgs[index].btns = [
{'name':'标为未读', bgColor:'#888888'},
{'name':'删除消息', bgColor:'#FF0036'},
];
this.msgs[index].msgnumber = 0;
}else{
this.msgs[index].btns = [
{'name':'标为已读', bgColor:'#323232'},
{'name':'删除消息', bgColor:'#FF0036'},
];
this.msgs[index].msgnumber = 1;
}
setTimeout(()=>{
this.msgs.splice(index, 1, this.msgs[index]);
}, 300);
}
// 第二个按钮被打开 [ 删除消息 ]
else if(btnIndex == 1){
uni.showModal({
title:"确定要删除吗?",
success: (e) => {
if(e.confirm){
this.msgs.splice(index, 1);
this.$refs.guiSlideList.moveIndex = -1;
}
}
});
}
},
btnlongTap(){
console.log('我被点击了')
this.$refs.guiactionsheet.open();
},
// 列表本身被点击
itemTap : function (e) {
console.log(e);
uni.showToast({title:"索引"+e});
},
loadMore : function () {
this.$refs.guiSlideList.startLoadig();
// 模拟 api 请求，因为请求数据里没有按钮信息我们利用js进行按钮补充
setTimeout(() => {
// 加载全部
// this.$refs.guiSlideList.nomore();
// 正常加载
for(let i = 0; i < msgsFromApi.length; i++){
// 具体几个按钮及按钮文本根据项目需求来，格式 {name:按钮文本, bgColor:按钮背景色}
msgsFromApi[i].btns = [
{'name':'标为已读', bgColor:'#323232'},
{'name':'删除消息', bgColor:'#FF0036'},
];
}
this.msgs = this.msgs.concat(msgsFromApi);
// 结束加载动画可以继续下一次的加载更多
this.$refs.guiSlideList.endLoading();
}, 500);
}
}
}
</script>
<style scoped>
</style>
tab页面基本开发完毕 下一篇我们讲解 发布笔记的前后端交互
代码地址
https://gitee.com/ddeatrr/springboot_vue_xhs