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

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. 201621123080《java程序设计》第六周作业总结

    201621123080<java程序设计>第六周作业总结 1. 本周学习总结 2. 书面作业 clone方法 1.1 在test1包中编写Employee类,在test2包中新建一个Te ...

  2. CentOS 7.4 基于LNMP搭建wordpress

    之前有好多次搭建wordpress的经历,有在Ubuntu系统上,有在CentOS7.2系统上,但都是搭完还是稀里糊涂的,因为好多都是教程上照着敲的.这次好好出个教程,以便以后方便查看. 准备工作:C ...

  3. python 取余运算

    python中取余运算逻辑如下: 如果a 与d 是整数,d 非零,那么余数 r 满足这样的关系: a = qd + r , q 为整数,且0 ≤ |r| < |d|. 经过测试可发现,pytho ...

  4. c++,友元类和友元函数

    都是声明时友元的东西可以访问自己类的私有和保护成员 类的友元 友元是C++提供的一种破坏数据封装和数据隐藏的机制. 通过将一个模块声明为另一个模块的友元,一个模块能够引用到另一个模块中本是被隐藏的信息 ...

  5. Linux学习-什么是登录档

    CentOS 7 登录档简易说明 登录档的重要性 为什么说登录文件很重要, 解决系统方面的错误: 用 Linux 这么久了,你应该偶而会发现系统可能会出现一些错误,包括硬件捉不到或者是某些系 统服务无 ...

  6. javaweb通过接口来实现多个文件压缩和下载(包括单文件下载,多文件批量下载)

    原博客地址:https://blog.csdn.net/weixin_37766296/article/details/80044000 将多个文件压缩并下载下来:(绿色为修改原博客的位置) 注意:需 ...

  7. [转] Vuex入门(2)—— state,mapState,...mapState对象展开符详解

    1.state  state是什么? 定义:state(vuex) ≍ data (vue) vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 ...

  8. jquery拼接字符串

    1. $("#div").append("<table><tr align='center'>" +"<td >& ...

  9. Leetcode 480.滑动窗口中位数

    滑动窗口中位数 中位数是有序序列最中间的那个数.如果序列的大小是偶数,则没有最中间的数:此时中位数是最中间的两个数的平均数. 例如: [2,3,4],中位数是 3 [2,3],中位数是 (2 + 3) ...

  10. Leetcode 456.132模式

    132模式 给定一个整数序列:a1, a2, ..., an,一个132模式的子序列 ai, aj, ak 被定义为:当 i < j < k 时,ai < ak < aj.设计 ...