【类 型】:fix

【主	题】:tabbar切换时 激活项的正确更新
【描	述】:
	[原因]:tabbar navigateBack时 无法正确切换到正确的激活项
	[过程]:
	[影响]:
【结	束】

# 类型 包含:
# feat:新功能(feature)
# fix:修补bug
# docs:文档(documentation)
# style: 格式(不影响代码运行的变动)
# refactor:重构(即不是新增功能,也不是修改bug的代码变动)
# test:增加测试
# chore:构建过程或辅助工具的变动
This commit is contained in:
szdot 2024-05-30 21:52:53 +08:00
parent 33da3989e7
commit 78f4c8b037
47 changed files with 88 additions and 108 deletions

View File

@ -13,14 +13,11 @@
export default {
name: "tabbar",
data() {
return {
current: this.menuCurrent
}
return {}
},
props: {
menuCurrent: {
type: Number,
deep: true
computed: {
current() {
return this.$store.state.tabbarCurrent
}
},
methods: {
@ -29,19 +26,20 @@
if (this.current === name) {
return
}
this.current = name
this.$store.commit('setTabbarCurrent', name)
if (name === 0) {
uni.redirectTo({
url: '/pages/index/index'
});
})
} else if (name === 1) {
uni.navigateTo({
url: '/pages/shop/list'
});
})
} else if (name === 2) {
uni.redirectTo({
url: '/pages/main/index'
});
})
}
},
}

View File

@ -32,7 +32,7 @@
<!-- tabbar -->
<view>
<tabbar menuCurrent=0></tabbar>
<tabbar></tabbar>
</view>
</view>
</template>
@ -62,8 +62,8 @@
this.checkUserInfo()
},
onShow() {
// current
this.current = 0;
// tabber
this.$store.commit('setTabbarCurrent', 0)
},
methods: {

View File

@ -2,7 +2,7 @@
<view class="vh100 flex column">
<!-- tabbar -->
<view>
<tabbar menuCurrent=2></tabbar>
<tabbar></tabbar>
</view>
</view>
</template>
@ -12,32 +12,14 @@
data() {
return {
avatarSrc: "", //
menuCurrent: null, //tabbar
}
},
onShow() {
// current
this.current = 2;
// tabber
this.$store.commit('setTabbarCurrent', 2)
},
methods: {
handleTabChange(name) {
// tab
if (this.current === name) {
return
}
if (name === 0) {
uni.redirectTo({
url: '/pages/index/index'
});
} else if (name === 1) {
uni.navigateTo({
url: '/pages/shop/list'
});
} else if (name === 2) {
uni.redirectTo({
url: '/pages/main/index'
});
}
}
}
}
</script>

View File

@ -118,6 +118,10 @@
onReady() {
this.getMenuItemTop()
},
onShow() {
// tabber
this.$store.commit('setTabbarCurrent', 1)
},
watch: {
// 'spuList': {
// handler(newVal, oldVal) {

View File

@ -37,11 +37,16 @@ const store = new Vuex.Store({
shopCon: {}, //商铺信息
cartList: [], //购物车列表 结构:[{"spu_id":"id","skuG":[sku_id,sku_id],"conutG":[数量,数量],"priceG":[单价,单价]},{.....}]
tabbarCurrent: 0, //tabbar的当前激活项
cartShow: false, //列表页 购物车折叠显隐
mqttState: false, //标记mqtt服务器是否已经连接成功
},
//修改状态
mutations: {
//设置tabbar当前激活像
setTabbarCurrent(state,val){
Vue.set(state,'tabbarCurrent', val)
},
//把用户信息 从本地缓存 提取到内存当中
setUserInfo(state, obj) {
Vue.set(state.userInfo, 'name', obj.name)

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1557,7 +1557,7 @@ function initData(vueOptions, context) {
try {
data = data.call(context); // 支持 Vue.prototype 上挂的数据
} catch (e) {
if (Object({"NODE_ENV":"development","VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).VUE_APP_DEBUG) {
if (Object({"VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).VUE_APP_DEBUG) {
console.warn('根据 Vue 的 data 函数初始化小程序 data 失败,请尽量确保 data 函数中不访问 vm 对象,否则可能影响首次数据渲染速度。', data);
}
}
@ -8923,7 +8923,7 @@ function type(obj) {
function flushCallbacks$1(vm) {
if (vm.__next_tick_callbacks && vm.__next_tick_callbacks.length) {
if (Object({"NODE_ENV":"development","VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).VUE_APP_DEBUG) {
if (Object({"VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).VUE_APP_DEBUG) {
var mpInstance = vm.$scope;
console.log('[' + (+new Date) + '][' + (mpInstance.is || mpInstance.route) + '][' + vm._uid +
']:flushCallbacks[' + vm.__next_tick_callbacks.length + ']');
@ -8944,14 +8944,14 @@ function nextTick$1(vm, cb) {
//1.nextTick 之前 已 setData 且 setData 还未回调完成
//2.nextTick 之前存在 render watcher
if (!vm.__next_tick_pending && !hasRenderWatcher(vm)) {
if(Object({"NODE_ENV":"development","VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).VUE_APP_DEBUG){
if(Object({"VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).VUE_APP_DEBUG){
var mpInstance = vm.$scope;
console.log('[' + (+new Date) + '][' + (mpInstance.is || mpInstance.route) + '][' + vm._uid +
']:nextVueTick');
}
return nextTick(cb, vm)
}else{
if(Object({"NODE_ENV":"development","VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).VUE_APP_DEBUG){
if(Object({"VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).VUE_APP_DEBUG){
var mpInstance$1 = vm.$scope;
console.log('[' + (+new Date) + '][' + (mpInstance$1.is || mpInstance$1.route) + '][' + vm._uid +
']:nextMPTick');
@ -9047,7 +9047,7 @@ var patch = function(oldVnode, vnode) {
});
var diffData = this.$shouldDiffData === false ? data : diff(data, mpData);
if (Object.keys(diffData).length) {
if (Object({"NODE_ENV":"development","VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).VUE_APP_DEBUG) {
if (Object({"VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).VUE_APP_DEBUG) {
console.log('[' + (+new Date) + '][' + (mpInstance.is || mpInstance.route) + '][' + this._uid +
']差量更新',
JSON.stringify(diffData));
@ -20304,7 +20304,7 @@ var debugs = {};
var debugEnviron;
exports.debuglog = function(set) {
if (isUndefined(debugEnviron))
debugEnviron = Object({"NODE_ENV":"development","VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","BASE_URL":"/"}).NODE_DEBUG || '';
debugEnviron = Object({"VUE_APP_DARK_MODE":"false","VUE_APP_NAME":"food_wechat","VUE_APP_PLATFORM":"mp-weixin","NODE_ENV":"development","BASE_URL":"/"}).NODE_DEBUG || '';
set = set.toUpperCase();
if (!debugs[set]) {
if (new RegExp('\\b' + set + '\\b', 'i').test(debugEnviron)) {
@ -24173,6 +24173,8 @@ var store = new _vuex.default.Store({
cartList: [],
//购物车列表 结构:[{"spu_id":"id","skuG":[sku_id,sku_id],"conutG":[数量,数量],"priceG":[单价,单价]},{.....}]
tabbarCurrent: 0,
//tabbar的当前激活项
cartShow: false,
//列表页 购物车折叠显隐
mqttState: false //标记mqtt服务器是否已经连接成功
@ -24180,6 +24182,10 @@ var store = new _vuex.default.Store({
//修改状态
mutations: {
//设置tabbar当前激活像
setTabbarCurrent: function setTabbarCurrent(state, val) {
_vue.default.set(state, 'tabbarCurrent', val);
},
//把用户信息 从本地缓存 提取到内存当中
setUserInfo: function setUserInfo(state, obj) {
_vue.default.set(state.userInfo, 'name', obj.name);

View File

@ -237,8 +237,8 @@ var _default = {
this.checkUserInfo();
},
onShow: function onShow() {
// 当页面显示时,设置 current 为首页索引
this.current = 0;
// 当页面显示时,设置tabber的激活项
this.$store.commit('setTabbarCurrent', 0);
},
methods: {
// 检查用户信息

View File

@ -1 +1 @@
<view class="vh100 flex column"><u-swiper vue-id="8dd740cc-1" list="{{bannerList}}" keyName="url" autoplay="{{true}}" height="616rpx" bind:__l="__l"></u-swiper><view class="flex rad32 boxshadow loginBox mac"><view class="m-l-24 w-80rpx h-80rpx"><u-avatar vue-id="8dd740cc-2" size="80rpx" src="{{avatarSrc}}" bind:__l="__l"></u-avatar></view><view class="flex1 m-l-24 flex mac h100"><navigator open-type="redirect" url="/pages/main/login"><view class="fb fz32">{{userInfo.tel}}</view></navigator><u-icon vue-id="8dd740cc-3" name="arrow-right" bind:__l="__l"></u-icon></view><view class="flex column mc mac m-r-24 w-80rpx h-80rpx"><u-icon vue-id="8dd740cc-4" size="48rpx" name="order" bind:__l="__l"></u-icon><view class="fz24">订单</view></view></view><view class="flex mse" style="height:222rpx;margin-top:30rpx;"><navigator url="/pages/shop/list"><main-but vue-id="8dd740cc-5" bg="#D43030" imgSrc="/static/icons/ordernow.svg" butBt="开始点餐" butSt="Order Now" bind:__l="__l"></main-but></navigator><navigator url="/pages/index/demo"><main-but vue-id="8dd740cc-6" bg="#FF8D1A" imgSrc="/static/icons/buggoods.svg" butBt="购买商品" butSt="Buy Goods" bind:__l="__l"></main-but></navigator></view><view><tabbar vue-id="8dd740cc-7" menuCurrent="0" bind:__l="__l"></tabbar></view></view>
<view class="vh100 flex column"><u-swiper vue-id="8dd740cc-1" list="{{bannerList}}" keyName="url" autoplay="{{true}}" height="616rpx" bind:__l="__l"></u-swiper><view class="flex rad32 boxshadow loginBox mac"><view class="m-l-24 w-80rpx h-80rpx"><u-avatar vue-id="8dd740cc-2" size="80rpx" src="{{avatarSrc}}" bind:__l="__l"></u-avatar></view><view class="flex1 m-l-24 flex mac h100"><navigator open-type="redirect" url="/pages/main/login"><view class="fb fz32">{{userInfo.tel}}</view></navigator><u-icon vue-id="8dd740cc-3" name="arrow-right" bind:__l="__l"></u-icon></view><view class="flex column mc mac m-r-24 w-80rpx h-80rpx"><u-icon vue-id="8dd740cc-4" size="48rpx" name="order" bind:__l="__l"></u-icon><view class="fz24">订单</view></view></view><view class="flex mse" style="height:222rpx;margin-top:30rpx;"><navigator url="/pages/shop/list"><main-but vue-id="8dd740cc-5" bg="#D43030" imgSrc="/static/icons/ordernow.svg" butBt="开始点餐" butSt="Order Now" bind:__l="__l"></main-but></navigator><navigator url="/pages/index/demo"><main-but vue-id="8dd740cc-6" bg="#FF8D1A" imgSrc="/static/icons/buggoods.svg" butBt="购买商品" butSt="Buy Goods" bind:__l="__l"></main-but></navigator></view><view><tabbar vue-id="8dd740cc-7" bind:__l="__l"></tabbar></view></view>

View File

@ -158,7 +158,7 @@ __webpack_require__.r(__webpack_exports__);
/***/ (function(module, exports, __webpack_require__) {
"use strict";
/* WEBPACK VAR INJECTION */(function(uni) {
Object.defineProperty(exports, "__esModule", {
value: true
@ -176,37 +176,18 @@ exports.default = void 0;
var _default = {
data: function data() {
return {
avatarSrc: "" //头像地址
avatarSrc: "",
//头像地址
menuCurrent: null //tabbar当前页
};
},
onShow: function onShow() {
// 当页面显示时,设置 current 为首页索引
this.current = 2;
// 当页面显示时,设置tabber的激活项
this.$store.commit('setTabbarCurrent', 2);
},
methods: {
handleTabChange: function handleTabChange(name) {
// 更新当前选中的 tab 索引
if (this.current === name) {
return;
}
if (name === 0) {
uni.redirectTo({
url: '/pages/index/index'
});
} else if (name === 1) {
uni.navigateTo({
url: '/pages/shop/list'
});
} else if (name === 2) {
uni.redirectTo({
url: '/pages/main/index'
});
}
}
}
methods: {}
};
exports.default = _default;
/* WEBPACK VAR INJECTION */}.call(this, __webpack_require__(/*! ./node_modules/@dcloudio/uni-mp-weixin/dist/index.js */ 2)["default"]))
/***/ }),

View File

@ -1 +1 @@
<view class="vh100 flex column"><view><tabbar vue-id="8687b11e-1" menuCurrent="2" bind:__l="__l"></tabbar></view></view>
<view class="vh100 flex column"><view><tabbar vue-id="8687b11e-1" bind:__l="__l"></tabbar></view></view>

View File

@ -329,6 +329,10 @@ var _default = {
onReady: function onReady() {
this.getMenuItemTop();
},
onShow: function onShow() {
// 当页面显示时设置tabber的激活项
this.$store.commit('setTabbarCurrent', 1);
},
watch: {
// 'spuList': {
// handler(newVal, oldVal) {