这篇文章主要为大家详细介绍了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;
}

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

    无相关信息
最新资讯
消息称苹果正在研发折叠屏手机:铰链几乎隐藏、屏幕更大

消息称苹果正在研发折

据国外消息人士Mark Gurman最新爆料,苹果正在进行一款
快手IPO市场认购火爆 部分投资者动用私人关系“预定份额”

快手IPO市场认购火爆

在过去70多天,部分投资人四处寻找可能与快手创始人宿华
彭博社:苹果全新Mac Pro开发中 外观类似 Power Mac G4 Cube

彭博社:苹果全新Mac Pr

根据彭博社的最新报道,苹果正在开发两款新 Mac Pro,以接
Keep完成3.6亿美元融资 狂奔之下运营能力缺失

Keep完成3.6亿美元融

在上线6年的时间里,Keep逐渐从最初的指导健身方式的工
苹果造车:颠覆行业or昙花一现

苹果造车:颠覆行业or昙

虽然现在关于苹果造车的传言满天飞,但有一点是较确定的
芯片危机波及全球 部分工厂按下暂停键 世界五大车企被迫减产

芯片危机波及全球 部

除了消极地等待主要厂商产能恢复,国内本土车企也在“芯
最新文章
详解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支持,