网站建设业务市场营销论文,做网站维护费是怎么算的,软件行业未来发展趋势,郑州网站建设技术托管本案例#xff0c;Message 身为组件#xff0c;使用不了任何钩子来重新获取 this.getMessageList() 消息列表 使用 props 父子传参#xff0c;因为 Message 组件使用不了页面生命周期从而无法拿到传递过来的数据 使用 watch 监听不到 props 更不建议使用本地存储#xff0c… 本案例Message 身为组件使用不了任何钩子来重新获取 this.getMessageList() 消息列表 使用 props 父子传参因为 Message 组件使用不了页面生命周期从而无法拿到传递过来的数据 使用 watch 监听不到 props 更不建议使用本地存储那样和 props 结果差不多 案例中采用的是发送全局事件的形式在父组件onShow后因为子组件是父组件的一部分所以在消息详情中返回子组件后其实就是在父组件的onShow中调用了 refreshMessageList 方法重新获取子组件 Message 的消息列表 从而实现了实时获取 若不做自定义 tabbar 的话, 没有这么麻烦的去试探数据传输 父组件 Tabbar
templateuni-transition mode-classfade :duration200 :showtrueview classmain_boxindex v-ifcurrentIndex 0/indexmyDoctor v-ifcurrentIndex 1/myDoctormessage v-ifcurrentIndex 2/messageprescript v-ifcurrentIndex 3/prescriptmy v-ifcurrentIndex 4/my/viewview classfoot_box!-- 其实一开始是想把这个作为一个组件来使用的不过数据传输特麻烦这时候硬要使用组件化完全不太明智如果是网页端Vue数据传输绝对简单... --!-- custom-tab-bar reftabbar :currentIndexcurrentIndex update:currentIndexupdateCurrentIndex/custom-tab-bar --uni-transition mode-classfade :duration200 :showtrueviewview classtab-contentslot //viewview classtabbarview classnavigatorview refwarpper classwarpperview refnavItem classnavigator-item v-for(item,index) in tabBar.list:keyitem.pagePath clickswitchTab(item,index) :data-indexindeximg :srcitem.iconPath classicon v-ifselectedIndex ! indeximg :srcitem.selectedIconPath:class[item.selectIconStyle ? icon-select : icon] v-elsetext:class[item-text,{text-active:selectedIndex index}]{{item.text}}/textview v-ifitem.hasUnreadMessage classunread-dot/view/view/view/view/view/view/uni-transition/view/uni-transition
/templatescriptimport {FILE_URL} from ../../api/base_api.js;import {GET_MESSAGE} from ../../api/user.js;import {store} from ../../store/modules/index.jsvar Hub require(../../utils/signalR.js)import index from /pages/index/index.vueimport myDoctor from /pages/my-doctor/my-doctor.vueimport message from /pages/message/message.vueimport prescript from /pages/prescript/prescript.vueimport my from /pages/person/person.vueexport default {components: {index,my,message,prescript,myDoctor},data() {return {// 定义一个目前的 unRead 状态若是集合起来大于 0那么就作为标记 unRead 数量针对系统聊天presentReadState: 0,messageList: [],pageIndex: 1,pageSize: 10,currentIndex: uni.getStorageSync(selectedIndex) || 0,selectedIndex: uni.getStorageSync(selectedIndex) || 0, // 标记tabBar: {list: [{pagePath: pages/index/index,text: 首页,iconPath: ../../static/images/tabbar/home.png,selectedIconPath: ../../static/images/tabbar/home1.png},{pagePath: pages/my-doctor/my-doctor,text: 我的医生,iconPath: ../../static/images/tabbar/doctor.png,selectedIconPath: ../../static/images/tabbar/doctor1.png},{pagePath: pages/message/message,text: 消息,iconPath: ../../static/images/tabbar/message.png,selectedIconPath: ../../static/images/tabbar/message1.png,hasUnreadMessage: uni.getStorageSync(inline-msg) // 记录 未读 | 已读},{pagePath: pages/prescript/prescript,text: 药膳商城,iconPath: ../../static/images/tabbar/mingyao2.png,selectedIconPath: ../../static/images/tabbar/mingyao3.png,selectIconStyle: true},{pagePath: pages/person/person,text: 我的,iconPath: ../../static/images/tabbar/my2.png,selectedIconPath: ../../static/images/tabbar/my1.png}]},}},methods: {loadsocket() {var _this this;if (_this.timeout)clearTimeout(_this.timeout);_this.hubConnect new Hub.HubConnection();_this.hubConnect.token uni.getStorageSync(WX_TOKEN)_this.hubConnect.start(FILE_URL /api/chathub);_this.hubConnect.onOpen res {}_this.hubConnect.on(Receive, function(res) {console.log(有数据了, res);uni.setStorageSync(inline-msg, true)})_this.hubConnect.on(UsingCode, res {})_this.hubConnect.on(UsedCode, res {})},switchTab(item, index) {this.currentIndex index;this.tabBar.list.forEach((v, i) {if (item.pagePath v.pagePath) {uni.setStorageSync(selectedIndex, index);}})this.selectedIndex uni.getStorageSync(selectedIndex)},},onShow() {this.tabBar.list[2].hasUnreadMessage uni.getStorageSync(inline-msg)// 父子传参方法也不好用message组件中没有onShow方法而且watch监听不到props// message为组件其他方法不太好用使用事件总线发送全局事件 refreshMessageListuni.$emit(refreshMessageList);},mounted() {this.loadsocket()},}
/script其中一个子组件 Message
templateview classmessage!-- 页面头 --view classheaderimage src../../static/images/index/index-topbar-back.png mode classback-img/imageview classtop-barview classname消息/view/view/view!-- 没有消息 --view classnone stylepadding-top: 200rpx; v-if!messageList.lengthu-empty modelist text暂无消息/u-empty/view!-- 消息列表 --view classlist v-elseview classitem v-for(item,index) in messageList :keyindex clickhandleToChat(item)view classavatarimage :srcitem.groupImage mode/image/viewview classmsg-infoview classleftview classname{{item.groupName}}/viewview classmsg{{item.lastMessage}}/view/viewview classrightview classdate{{item.changeTime.slice(5,16)}}/viewview classno-read-count v-ifitem.unRead{{item.unRead}}/view/view/view/view/view!-- custom-tab-bar reftabbar/custom-tab-bar --!-- 登录弹窗 --!-- u-popup v-modelisShowLogin modecenter border-radius14 :closeabletrueAuthLogin setDatagetLoginData/AuthLogin/u-popup --/view
/templatescriptimport {APP_BASE_URL,FILE_URL} from ../../api/base_api.js;import {GET_MESSAGE} from ../../api/user.js;// import AuthLogin from ../common/auth-login.vuevar Hub require(../../utils/signalR.js)export default {data() {return {messageList: [],pageIndex: 1,pageSize: 10,// isShowLogin: false, //登录弹窗}},watch: {presentReadState(newValue, oldValue) {}},components: {// AuthLogin},onHide() {console.log(断开)this.hubConnect.close();},mounted() {if (uni.getStorageSync(WX_TOKEN)) {this.messageList []this.getMessageList()// 当回到 message 组件中(其实就是在父组件的onShow中)调用全局事件refreshMessageList来重置消息列表uni.$on(refreshMessageList, this.getMessageList);}if (this.hubConnect) {if (this.hubConnect.connection null || !this.hubConnect.openStatus) {this.loadsocket();}} else {this.loadsocket();}},beforeDestroy() {// 销毁uni.$off(refreshMessageList, this.getMessageList);},methods: {// 获取弹窗传值// getLoginData(status) {// this.isShowLogin status// },// 获取消息列表getMessageList() {GET_MESSAGE({page: this.pageIndex,limit: this.pageSize}).then(res {if (res.data) {this.messageList res.data}})},// 获取getcode() {if (this.hubConnect this.hubConnect.connection ! null this.hubConnect.openStatus) {this.hubConnect.send(GetCode, 3);this.xunhuan();}},// 链接loadsocket() {var _this this;if (_this.timeout)clearTimeout(_this.timeout);// connection_this.hubConnect new Hub.HubConnection();_this.hubConnect.token uni.getStorageSync(WX_TOKEN)_this.hubConnect.start(FILE_URL /api/chathub);_this.hubConnect.onOpen res {}_this.hubConnect.on(Receive, res {uni.setStorageSync(inline-msg, true)_this.messageList []_this.getMessageList()})_this.hubConnect.on(UsingCode, res {_this.show true;})_this.hubConnect.on(UsedCode, res {})},// 跳转聊天handleToChat(item) {if (!uni.getStorageSync(WX_TOKEN)) {// this.isShowLogin truereturn false}uni.navigateTo({url: /pages/tools/chat/sys-message?item JSON.stringify(item)})}},}
/script
