计算属性在微信小程序自定义tab中的问题
pyc188 opened this issue · comments
项目微信小程序 ，使用的是自定义的底部菜单。微信 custom-tab-bar 组件。这个自定义custom-tab-bar有点特殊
要实现的是 ：点击一个菜单，设置选中状态（改变css）
部分app.json代码：
"tabBar": { "custom": true, "color": "#7A7E83", "selectedColor": "#3cc51f", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/seedling/seedling", "text": "查价格" }, { "pagePath": "pages/task/task", "text": "报价格" }, { "pagePath": "pages/user/user", "text": "我的" } ] },
=======================================
部分 custom-tab-bar/index.js代码：
import create from '../utils/create'; import { store } from '../store/index'; var app = getApp(); //console.log("custom-tab-bar",store); create.Component(store, { use: ['logs', 'motto','userInfo.noReadMsgNum'], //计算属性 computed: { currtpage() { console.log(wx.getStorageSync('footMenu')); return wx.getStorageSync('footMenu') } }, options: { styleIsolation: "apply-shared", //最新的样式支持，2.6.5版本 addGlobalClass: true, //旧的 }, methods: { gotoPage(e) { wx.setStorageSync("footMenu", e.currentTarget.dataset.pagevalue); }
===========================================
部分 custom-tab-bar/index.wxml代码：
<view class="action {{currtpage == 'seedling' ?'text-front':'text-after'}}" bindtap="gotoPage" data-pagevalue="seedling"> <view class='icon-search'></view> 查价格 </view> <view class="action {{currtpage == 'task' ?'text-front':'text-after'}}" bindtap="gotoPage" data-pagevalue="task"> <view class='icon-similar'></view> 报价格 </view> <view class="action {{currtpage == 'user' ?'text-front':'text-after'}}" bindtap="gotoPage" data-pagevalue="user"> <view class='icon-my'> <view wx:if="{{$.userInfo.noReadMsgNum>0}}" class='cu-tag badge'> {{$.userInfo.noReadMsgNum}} </view> </view> 我的 </view>
==================================================
问题如下：
计算属性，第3次的时候不能正确设置其值。首页进来的是seedling这个页面,可以正常设置菜单 text-front这个css类，点击报价格，也可以正常的设置 菜单的 text-front 类.当在点击‘’我的页面的时候，此时 currtpage 的值没有变成 "user".在计算属性里面打印是可以正常获取到 "user"的.导致 ‘’我的 ‘’菜单并没有设置 text-front 类。也就无法显示选中状态。如果用store.data则可以解决这个问题