网页设计公司平台_网页美工设计论文_班级优化大师网页版_seo是搜索引擎优化

前言

移动端演示 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-pageclass="gui-bg-white":fullPage="true":isLoading="pageLoading"ref="guiPage"><templatev-slot:gBody><viewclass="gui-flex1 gui-flex gui-column"><viewclass="gui-flex1 gui-relative"><gui-xhs-slide-listclass="gui-flex1":msgs="msgs"@itemTap="itemTap"@btnTap="btnTap"@scrolltolower="loadMore"ref="guiSlideList"></gui-xhs-slide-list></view></view><gui-action-sheetheight=180ref="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