这篇文章主要为大家详细介绍了10行代码实现微信小程序tab切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序tab切换展示的具体代码,供大家参考,具体内容如下

效果预览:

 

js部分:

Page({

 data: {
  arr: [1,2,3,4,5,6,7,8],
  index: 1
 },

 onLoad: function (options) {
  this.setData({
   childW: this.data.arr.length * 80
  });
 },

 tabOn: function (e) {
  this.setData({
   index: e.currentTarget.dataset.index + 1
  });
 }

})

wxtml部分:

<scroll-view scroll-x scroll-with-animation='true'>
 <view style='width: {{ childW }}px'>
  <block wx:for='{{ arr }}'>
   <view class='tab' catchtap='tabOn'>{{ item }}</view>
  </block>
 </view>
</scroll-view>

<view class='content' wx:if='{{ index == 1 }}'>内容一</view>
<view class='content' wx:if='{{ index == 2 }}'>内容二</view>
<view class='content' wx:if='{{ index == 3 }}'>内容三</view>
<view class='content' wx:if='{{ index == 4 }}'>内容四</view>
<view class='content' wx:if='{{ index == 5 }}'>内容五</view>
<view class='content' wx:if='{{ index == 6 }}'>内容六</view>
<view class='content' wx:if='{{ index == 7 }}'>内容七</view>
<view class='content' wx:if='{{ index == 8 }}'>内容八</view>

wxss部分:

.tab{
 height: 50px;
 width: 80px;
 display: inline-block;
 text-align: center;
 line-height: 50px;
}

.tab:nth-child(odd){
 background-color: #ccc;
}

.content{
 width: 100%;
 height: 200px;
 text-align: center;
 line-height: 200px;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持爱安网。

    无相关信息
最新资讯
iOS 14正式版安装率将过半 即将超过iOS 13

iOS 14正式版安装率将

根据移动分析公司Mixpanel的数据,截止10月27日,iOS 14正
谷歌母公司旗下Waymo联手戴姆勒共同开发自动驾驶卡车

谷歌母公司旗下Waymo

据报道,戴姆勒卡车公司已经与谷歌母公司Alphabet旗下的
自动驾驶真正上路 还有10%的技术难题待解

自动驾驶真正上路 还

自动驾驶在技术上已经解决了90%的问题,但剩下10%的问题
90后小伙缘何沦为电信诈骗“工具人”

90后小伙缘何沦为电信

根据案件情况,惠山区人民检察院对傅小宝的姐姐傅某、姐
做芯片不是捏泥丸,请做好长期“打工”的准备

做芯片不是捏泥丸,请做

所有努力都不会徒劳无益,哪怕日拱一卒,也是在默默催动生
美FCC投票决定维持废除“网络中立”规则的命令

美FCC投票决定维持废

国联邦通信委员会(FCC)周二以3比2的投票结果作出决定,维
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,