这种页面的布局会经常用到,所以在此做个笔记,之后遇到可以节省很多时间

WXML:

<view class='listTitle_tab'>
     <view class='scrollTitle' style='width:{{Width}}px'>
              <view class='listTitle_tab_ltem {{index==0?"on":""}}' data-index="0" bindtap='btnchoose' style='width:{{WidthI}}px;'>标题一</view>
              <view class='listTitle_tab_ltem {{index==1?"on":""}}' data-index="1" bindtap='btnchoose' style='width:{{WidthI}}px; '>标题二</view>
              <view class='listTitle_tab_ltem {{index==2?"on":""}}' data-index="2" bindtap='btnchoose' style='width:{{WidthI}}px; '>标题三</view>
              <view class='listTitle_tab_ltem {{index==3?"on":""}}' data-index="3" bindtap='btnchoose' style='width:{{WidthI}}px;'>标题四</view>
              <view class='listTitle_tab_ltem {{index==4?"on":""}}' data-index="4" bindtap='btnchoose' style='width:{{WidthI}}px;'>标题五</view>
              <view class='listTitle_tab_ltem {{index==5?"on":""}}' data-index="5" bindtap='btnchoose' style='width:{{WidthI}}px;'>标题六</view>
              <view class='listTitle_tab_ltem {{index==6?"on":""}}' data-index="6" bindtap='btnchoose' style='width:{{WidthI}}px; '>标题七</view>
              <view class='listTitle_tab_ltem {{index==7?"on":""}}' data-index="7" bindtap='btnchoose' style='width:{{WidthI}}px;'>标题八</view>
     </view>
</view>
<swiper class='swiper_content' current="{{index}}" bindchange='swiperContent'>
     <swiper-item>我是内容一</swiper-item>
     <swiper-item>我是内容二</swiper-item>
     <swiper-item>我是内容三</swiper-item>
     <swiper-item>我是内容四</swiper-item>
     <swiper-item>我是内容五</swiper-item>
     <swiper-item>我是内容六</swiper-item>
     <swiper-item>我是内容七</swiper-item>
     <swiper-item>我是内容八</swiper-item>
</swiper>
 
CSS:
.listTitle_tab{height: 100rpx;line-height: 100rpx;border-bottom: 1px solid #ccc;background: #e5e5e5;overflow-x: scroll;}
::-webkit-scrollbar{display: none}
.scrollTitle{height: 100rpx;line-height: 100rpx;transition: .3s linear;}
.listTitle_tab_ltem{float: left;text-align: center;position: relative;}
.listTitle_tab_ltem:nth-of-type(2)::before{content: "";position: absolute;left: 0;top: 30rpx;width: 1px;height: 40rpx;background: #ccc}
.listTitle_tab_ltem:nth-of-type(2)::after{content: "";position: absolute;right: 0;top: 30rpx;width: 1px;height: 40rpx;background: #ccc}
.on{color: #ff0000;}
 
 
JS:
var indexNum;
var widthAll;
Page({
     data: {
        index: 0,
     },
onLoad: function (options) {
      var that = this;
      wx.getSystemInfo({
        success: function (res) {
           console.log(res)
           that.setData({
                WidthI: res.windowWidth / 3,
                Width: (res.windowWidth / 3) * 8
           })
          widthAll = res.windowWidth / 3
       },
    })
},
swiperContent: function (res) {
     var that = this;
     that.setData({
          index: res.detail.current
     })
},
btnchoose: function (e) {
      var that = this;
      indexNum = e.currentTarget.dataset.index;
      console.log(indexNum)
      var currentIndex = that.data.index //获取swiper显示的模块的index
      if (indexNum == currentIndex) {
           return false;
      } else {
           that.setData({
                 index: indexNum
           })
     };
 },
})

小程序-TabBar点击切换的更多相关文章

  1. 微信小程序~TabBar底部导航切换栏

    底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的 ...

  2. 微信小程序 tabBar模板

    tabBar导航栏 小程序tabBar,我们可以通过app.json进行配置,可以放置于顶部或者底部,用于不同功能页面的切换,挺好的... 但,,,貌似不能让动态修改tabBar(需求:通过switc ...

  3. 微信小程序tabbar设置样式在哪里改

    微信小程序tabbar通俗点说就是底部导航,我们一般会配置相关的菜单,方便读者快速导航.tabbar是在项目根目录中的配置文件 app.json 中进行设置:如果小程序是一个多 tab 应用(客户端窗 ...

  4. 小程序tabBar显示问题

    我一直在纠结为什么小程序在有的页面显示,有的页面不显示 查了一下才知道,小程序tabBar只在tabBar中的list定义了页面的才会显示,其余页面不会显示 如下例:tabBar只在画红框的页面显示

  5. 微信小程序实现点击拍照长按录像功能

    微信小程序实现点击拍照长按录像功能 代码里面注释写的都很详细,直接上代码.官方的组件属性中有触摸开始和触摸结束属性.本功能依靠这些属性实现. .wxml代码: <!-- 相机 pages/cam ...

  6. 微信小程序tabBar与redirectTo 或navigateTo冲突

    微信小程序tabBar与redirectTo 或navigateTo冲突 tabBar设置的pagePath无法再次被redirectTo或navigateTo引用 导致跳转失败,更改为swithTa ...

  7. 微信小程序关于tabbar点击切换数据不刷新问题

    微信小程序中经常遇到的需求就是我提交了一个表单或者进行了一个操作,需要在我的个人中心页面中实时显示出来,但是小程序中的tabbar切换类似于tab切换 并不会进行页面刷新请求 所以总是会造成一些数据更 ...

  8. 微信小程序换皮肤,动态切换菜单栏和导航栏的样式,动态修改TabBar和NavigationBar

    在做微信小程序换皮肤的时候,需要动态修改菜单栏(TabBar)和导航栏(NavigationBar) 但是在小程序中它们的样式是写在app.json里面,而且app.json是静态编译,运行时哪怕你修 ...

  9. 小程序 - swiper除了左右切换还有上下滚动超出屏幕的内容

    本来呢,我是有专门整理小程序恶心bug的文章的,每次只要添加汇总就好, 但是呢,鉴于这个问题的恶心程度,所以我把他单独拿出来说了. ---------------------------------- ...

随机推荐

  1. k8s调度的预选策略及优选函数

    scheduler调度过程:    Predicate(预选)-->Priority(优选)-->Select(选定)调度方式:    1.节点亲和性调度(NodeAffinity)使用n ...

  2. Windows10 关闭自动更新

    win+R调出运行窗口: 输入services.msc,查找 跳出服务窗口,点击windows update设置禁用即可 Windows Update Medic Service没办法禁用,需要采用其 ...

  3. DC 课程内容

  4. python爬虫基础16-cookie在爬虫中的应用

    Cookie的Python爬虫应用 Cookie是什么 Cookie,有时也用其复数形式 Cookies,英文是饼干的意思.指某些网站为了辨别用户身份.进行 session 跟踪而储存在用户本地终端上 ...

  5. 有关Kali的方法

    Kali 找回系统登陆密码的方式:https://jingyan.baidu.com/article/47a29f24560e77c0142399e3.html

  6. HDU - 1251 统计难题(Trie树)

    有很多单词(只有小写字母组成,不会有重复的单词出现) 要统计出以某个字符串为前缀的单词数量(单词本身也是自己的前缀). 每个单词长度不会超过10. Trie树的模板题.这个题内存把控不好容易MLE. ...

  7. re--读书笔记【转】

    原文链接 * 正则表达式入门 1.正则表达式的两种基本用途:搜索和替换. 2.正则表达式是一些用来匹配和处理文本的字符串. 小结:正则表达式是文本处理方面功能最强大的工具之一,正则表达式语言用来构造正 ...

  8. Linux学习-Linux 主机上的用户讯息传递

    查询使用者: w, who, last, lastlog 如果你想要知道目前已登入在系统上面的用户呢?可以透过 w 或 who 来查询喔!如下范例所示: [root@study ~]# w 01:49 ...

  9. Splay的用法

    splay区间增减查询 #include<cstdio> #include<algorithm> using namespace std; ; const int INF = ...

  10. HDU 5468 Puzzled Elena 莫比乌斯反演

    题意: 给出一棵树,每个点上有权值.然后求每棵子树中与根节点互质( \(gcd(a, b) = 1\) )的节点个数. 分析: 对于一颗子树来说,设根节点的权值为\(u\), \(count_i\)表 ...