网站做多少分辨率,品牌网页设计图片,电子商务网站创建方案,旅游类网站建设受众分析先看效果是否可以满足你们#xff0c;如果可以满足你只要一步一步照着做绝对没有错。 本人技术不佳#xff0c;研究了一整天#xff0c;全网的大佬们写的博客看的晕头转向#xff0c;避免大伙再走弯路#xff0c;跟着我以下步骤一点一点来绝对可以实现。 最终效果图#…        先看效果是否可以满足你们如果可以满足你只要一步一步照着做绝对没有错。 本人技术不佳研究了一整天全网的大佬们写的博客看的晕头转向避免大伙再走弯路跟着我以下步骤一点一点来绝对可以实现。 最终效果图 如果你看着还满意的话那就跟着教程一步一步来吧 首先你要确保你的项目中安装了 uview的UI框架和vuex具体安装教程这两个网上都有详细教程我这项目是Vue3.0的用的是uview-plus框架。 第一步配置信息 pages.js 添加 custom: true 属性 第二步添加自定义tabBar代码文件 注意这里是按官方要求必须放在项目根目录下而且文件名不能修改index中代码如下 templateviewu-tabbar :valueindex changetabBarChange :fixedtrue :placeholdertrue :safeAreaInsetBottomtrueactiveColor#d81e06u-tabbar-item text首页template #active-iconimage classu-page__item__slot-icon :srclist[0].selectedIconPath/image/templatetemplate #inactive-iconimage classu-page__item__slot-icon :srclist[0].iconPath/image/template/u-tabbar-itemu-tabbar-item text转让template #active-iconimage classu-page__item__slot-icon :srclist[1].selectedIconPath/image/templatetemplate #inactive-iconimage classu-page__item__slot-icon :srclist[1].iconPath/image/template/u-tabbar-itemu-tabbar-item clickshow truetemplate #active-iconimage classu-page__item__slot-icon-big :srclist[2].selectedIconPath/image/templatetemplate #inactive-iconimage classu-page__item__slot-icon-big :srclist[2].iconPath/image/template/u-tabbar-itemu-tabbar-item text积分template #active-iconimage classu-page__item__slot-icon :srclist[3].selectedIconPath/image/templatetemplate #inactive-iconimage classu-page__item__slot-icon :srclist[3].iconPath/image/template/u-tabbar-itemu-tabbar-item text我的template #active-iconimage classu-page__item__slot-icon :srclist[4].selectedIconPath/image/templatetemplate #inactive-iconimage classu-page__item__slot-icon :srclist[4].iconPath/image/template/u-tabbar-item/u-tabbarviewu-popup :overlayOpacity0.6 :round10 :showshow closeclose openopenview classissue-itemview classissue-item-buy clicktoBuytext我要卖/text/viewview classissue-item-selltext我要买/text/view/view/u-popup/view/view /templatescriptexport default {data() {return {show: false,list: [{pagePath: /pages/index/index,text: 首页,iconPath: /static/tabs/home_default.png,selectedIconPath: /static/tabs/home_selected.png},{pagePath: /pages/makeOver/makeOver,text: 转让,iconPath: /static/tabs/mass_default.png,selectedIconPath: /static/tabs/mass_selected.png},{pagePath: /pages/issue/issue,text: 发布,iconPath: /static/images/tab_issue.png,selectedIconPath: /static/images/tab_issue.png},{pagePath: /pages/integral/integral,text: 积分,iconPath: /static/tabs/mass_default.png,selectedIconPath: /static/tabs/mass_selected.png},{pagePath: /pages/my/my,text: 我的,iconPath: /static/tabs/my_default.png,selectedIconPath: /static/tabs/my_selected.png}]}},computed: {index() {return this.$store.state.tabbarIndex}},methods: {tabBarChange(e) {if (e ! 2) {uni.switchTab({url: this.list[e].pagePath})}},//点击发布按钮的弹出层open() {console.log(open);},close() {this.show false;console.log(close);},//点击我要卖toBuy() {console.log(点击了);uni.switchTab({url: /pages/issue/issue})}}} /scriptstyle langscss.u-page__item__slot-icon {width: 50rpx;height: 50rpx;}.u-page__item__slot-icon-big {width: 120rpx;height: 120rpx;margin-bottom: 30rpx;}.issue-item {height: 400rpx;display: flex;justify-content: center;align-items: center;.issue-item-buy,.issue-item-sell {width: 30%;height: 100rpx;font-size: 28rpx;border-radius: 20rpx;background-color: pink;margin: 40rpx;line-height: 100rpx;text-align: center;}} /style 下面我给大家先讲讲实现的逻辑首先逛了一天的博客有的人用for循环来做刚开始我也用循环但是我中间有个凸起的发布按钮我想做出点击后有弹出层然后再选择的功能按照网上他们说的去做都直接跳转了我这点击发布效果如下图  没办法我只能我只有会写死反正后面这个换的也不是太频繁。 我再讲讲代码中需要注意的点吧首先 如下图的value值我绑定的computed计算属性中的index然后methods中的tabBarChange方法呢是点击tabBar切换的每一项下面我又加个if判断就是用来控制中间发布的那个图标点击后不跳转 以上配置好后那就在每一个跳转页配一下代码作用是用来更store中的changgeTabbarIndex的值也就是确保页面跳转后图标选中你所点击的那个页面我这里每个页面都配置了一下。代码如下 onShow() {this.$store.commit(changeTabbarIndex, 1)}, 第三步安装配置vuex 首先说为什么要安装vuex因为通过vuex来实现组件和组件之间数据传递当你点击不同tabBar来回切换的时候把对应的值存在store中。 安装命令npm install vuex --save 配置vuex项目根目录下新建 store/index.js文件代码如下 import {createStore } from vuexconst store createStore({//全局状态state: {tabbarIndex: 0,},//同步的方法commitmutations: {changeTabbarIndex(state, index) {state.tabbarIndex index;console.log(uvexIndex,state.tabbarIndex);}},//异步的方法 dispatchactions: {} })export default store 第四步配置主入口文件 到这里就已经完成了这是本人第一个小程序项目希望能给新手们带来点帮助欢迎大佬们前来批评指正。