网站建设网站栏目结构图,古董专家官方网站微信,网站整站源码下载工具,制作网页所用的语言是什么文章目录 1. 自定义tabbar效果2. pages新建tabbar页面3. tabbar 页面结构4. tabbar 页面完整代码 1. 自定义tabbar效果 2. pages新建tabbar页面
首先在 pages.json 文件中#xff0c;新建一个 tabbar 页面
pages: [ //pages数组中第一项表示应用启动页#xff… 文章目录 1. 自定义tabbar效果2. pages新建tabbar页面3. tabbar 页面结构4. tabbar 页面完整代码 1. 自定义tabbar效果 2. pages新建tabbar页面
首先在 pages.json 文件中新建一个 tabbar 页面
pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/tabbar,style: {navigationBarTitleText: tabbar页面,navigationStyle: custom}},.....// 其他页面
],3. tabbar 页面结构
此页面主要是写 tabbar的html样式和布局引用主页面代码通过 v-if 控制进行展示 indexsearchmaimnewsme 一级页面 4. tabbar 页面完整代码
css 样式文件太多了就不贴出来了
templateviewindex v-ifPageCurindex/indexsearch v-ifPageCursearch/searchnews v-ifPageCurnews/newsme v-ifPageCurme/meview classboxview classcu-bar tabbar bg-white shadow footview classaction clickNavChange data-curindexview classcuIcon-cu-imageimage v-ifPageCurindex src../../static/tabBar/index_cur.png/imageimage v-ifPageCur ! index src../../static/tabBar/index.png/image/viewview :classPageCurindex?color_main:text-gray首页/view/viewview classaction clickNavChange data-cursearchview classcuIcon-cu-imageview classcu-tag badge/viewimage v-ifPageCursearch src../../static/tabBar/shop_cur.png/imageimage v-ifPageCur ! search src../../static/tabBar/shop.png/image/viewview :classPageCursearch?color_main:text-gray会员专区/view/view
view clickNavChange classaction text-gray add-action data-curmainimage classlogo_btn modewidthFix src../../static/logo.png/imageview :classPageCurmain?color_main:text-gray组件模板/view/viewview classaction clickNavChange data-curnewsview classcuIcon-cu-imageview classcu-tag badge{{message}}/viewimage v-ifPageCurnews src../../static/tabBar/order_cur.png/imageimage v-ifPageCur ! news src../../static/tabBar/order.png/image/viewview :classPageCurnews?color_main:text-gray文章资讯/view/viewview classaction clickNavChange data-curmeview classcuIcon-cu-imageimage v-ifPageCurme src../../static/tabBar/me_cur.png/imageimage v-ifPageCur ! me src../../static/tabBar/me.png/image/viewview :classPageCurme?color_main:text-gray个人中心/view/view/view/view/view
/templatescriptimport index from ./index.vue; //首页import search from ./search.vue; //会员专区import main from ./main.vue; //组件模板import news from ./news.vue; //文章咨询import me from ./me.vue; //个人中心export default {components: {index,search,main,news,me},data() {return {PageCur: index,message: 99,duration:1};},methods: {NavChange: function(e) {this.PageCur e.currentTarget.dataset.cur;},}}
/scriptstyle langscss// 省略
/style
