微信小程序之tabBar

tabBar:

一般是放在全局变量的json中。
格式如下

 "tabBar": {
    "list": [{
      "pagePath": "pages/main/main",//路径
      "text": "主页",//text文本
      "iconPath":"pages/image/movie.png",//图标
      "selectedIconPath":"pages/image/moviech.png"//选择之后图标的改变情况。
      
    },
    {
      "pagePath": "pages/weekly/weekly",
      "text": "推荐",
      "iconPath":"pages/image/mine.png",
      "selectedIconPath":"pages/image/minech.png"
    } 
  ]
  },

案例:

推荐wxml
<image src="wusha.jpeg" class="wusha"></image>
<view class="container">
<view class="jianjie">简介</view>
<view class="neirong">李维杰与妻子阿玉来泰打拼17年,膝下育有两个女儿,年届四十的他靠开设网络公司为生,为人也颇得小镇居民的好感,而这一切美好却被突如其来的不速之客打破。这个充斥走私,贩毒活动的边陲小镇,各种权力交织碾压公平正义。李维杰的大女儿被督察长的儿子强暴,因反抗误杀对方。李维杰曾亲眼 目睹督察长滥用私刑,深知法律无用,为了维护女儿,捍卫家人,李维杰埋尸掩盖一切证据,在时间与空间的交错缝隙中,与警方在身心层面,展开了殊死一搏的较量。</view>
</view>
主页
<swiper class="swiper" autoplay interval="2000" indicator-dots indicator-color="red" >
<swiper-item >
<image src="tu2.webp"></image>
</swiper-item>
<swiper-item>
<image src="tu3.webp"></image>
</swiper-item>
<swiper-item>
<image src="winner.webp"></image>
</swiper-item>
<swiper-item>
<image src="dc.webp"></image>
</swiper-item>
</swiper>
<view class="containe">
<navigator></navigator>

<view class="recom">每周推荐</view>
<view class="csdn">我的SCDN:https://blog.csdn.net/qq_45353823</view>
</view>

效果图:

在这里插入图片描述
TabBar在前面介绍格式的时候已经写出,wxss就不再放置。
在这里插入图片描述

号召

这里我也建立了个QQ群1098392728,希望不管是大学生还是在职的IT工作人士可以共同努力学习。群内有一些IT书籍可以免费给大家观看。如果有需要博主会将某云的50gIT书籍免费分享给大家
在这里插入图片描述

发布了79 篇原创文章 · 获赞 55 · 访问量 7158

猜你喜欢

转载自blog.csdn.net/qq_45353823/article/details/105339553