第一种：swiper选项卡，可点击可滑动（swiper自带了一个150的高度，高度不好控制）

html

<!-- 选项卡 -->
<view class='topTabSwiper'><!-- 从接口获取数据写法 index是小程序自带的可以直接用<view class="tabbox" wx:for="{{detail_data.copywriting}}" wx:key="index"><text  class="tab {{currentData == index ? 'tabBorer' : ''}}"  data-current = "{{index}}" bindtap='checkCurrent'>{{item.title}}</text></view>
--><view class="tabbox"><text class='tab  {{currentData == 0 ? "tabBorer" : ""}}'  data-current = "0" bindtap='checkCurrent'>菜单一</text><text class='tab  {{currentData == 1 ? "tabBorer" : ""}}'  data-current = "1" bindtap='checkCurrent'>菜单二</text><text class='tab  {{currentData == 2 ? "tabBorer" : ""}}'  data-current = "2" bindtap='checkCurrent'>菜单三</text></view> </view><swiper   current="{{currentData}}" class='swiper3'  duration="300" bindchange="bindchange">
<!--从接口获取数据写法<swiper-item wx:for="{{detail_data.copywriting}}" wx:key="index"><view class='swiper_con'><view class="adrss_box" wx:for="{{item.detailmessage}}" wx:for-item="cell" wx:key="index">{{cell.title.titlestr}}</view></view></swiper-item>
--><swiper-item><view class='swiper_con'>内容一</view></swiper-item><swiper-item><view class='swiper_con'>内容二</view></swiper-item>  <swiper-item><view class='swiper_con'>内容三</view></swiper-item></swiper>
<!-- 选项卡 End-->

data:{//选项卡currentData: 0,
}

/*** tab切换*/
//swiper切换时会调用
//获取当前滑块的index
bindchange: function (e) {var index = e.detail.current;// console.log("滑动"+index)this.setData({currentData: e.detail.current,})
},
//点击切换，滑块index赋值
checkCurrent: function (e) {var index = e.target.dataset.current;if (this.data.currentData === e.target.dataset.current) {return false;} else {this.setData({currentData: e.target.dataset.current,})}// console.log("点击" + index)
},

css 这部分不重要

.title {width:100%;height:88rpx;background: white;display:flex;align-items:center;justify-content: space-around;}
.topTabSwiper{height:50rpx;font-size:26rpx;margin-bottom:20rpx;padding:0 40rpx;}
.topTabSwiper:after{content: ""; clear: both;display: block;}
.tabbox{float:left; width:20%;text-align:center; }
.tab{display:block;height:50rpx;line-height:50rpx;width:80%;border-radius:25rpx;color:#292b33;margin:0 auto;}
.tabBorer {color:#fff;background: -webkit-linear-gradient(left,#ffc20d ,#ffad00);
background: -o-linear-gradient(left, #ffc20d ,#ffad00);
background: -moz-linear-gradient(left, #ffc20d ,#ffad00);
background: linear-gradient(to right, #ffc20d ,#ffad00);}
.topTabSwiper .swiper{width:100%;}
.swiper_con{width:100%;height: 100%;}

我的接口数据格式（供参考），循环里套循环取出数据

最终效果

第二种，只点击

<view class="swiper-tab">
<!-- 从接口取数据<view  class="tabbox" wx:for="{{detail_data.copywriting}}" wx:key="index"><text class="swiper-tab-item {{currentTab== index ?'active':''}}" data-current="{{index}}" bindtap="clickTab">{{item.title}}</text></view>
--><view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="clickTab">菜单一</view><view class="swiper-tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="clickTab">菜单二</view></view><!--从接口取数据
<view wx:for="{{detail_data.copywriting}}" wx:key="index" class = "{{currentTab == index ? 'show':'hidden'}}" ><scroll-view><view class="adrss_box" wx:for="{{item.detailmessage}}" wx:for-item="cell" wx:key="index">{{cell.title.titlestr}}</view></scroll-view>
</view>
--><view class = "{{currentTab == 0 ? 'show':'hidden'}}" ><scroll-view><text>内容2</text></scroll-view>
</view>
<view class = "{{currentTab == 1 ? 'show':'hidden'}}"><scroll-view><text>内容3</text></scroll-view>
</view>

dada:{
currentTab:0,
}

//点击切换
clickTab: function (e) {var that = this;if (this.data.currentTab === e.target.dataset.current) {return false;} else {that.setData({currentTab: e.target.dataset.current,})}
},

json格式、样式都与第一种一样

微信小程序选项卡(数据双层循环)相关推荐

小程序素材抓取软件_如何抓取微信小程序的数据？
2017年1月份备受关注的微信小程序功能正式上线了,好多知名平台纷纷推出了自己的微信小程序,例如大众点评.美团外卖.京东购物.对于我们爬虫开发者来说这绝对是好事情,意味着又多了一个数据来源,又多了一种 ...
微信小程序observers数据监听器的使用
微信小程序observers数据监听器的使用数据监听器可以用于监听和响应任何属性和数据字段的变化. 1.observers使用的前提条件在微信小程序中数据监听器的使用是有几个前提条件的,否则是无法 ...
微信小程序开发数据缓存基础知识辨析以及运用实例
微信小程序开发数据缓存基础知识辨析以及运用实例提示:这里可以添加本文要记录的大概内容: 例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的 ...
微信小程序用户数据的签名校验和加解密 - 后端nodejs
在本文微信小程序用户数据的签名校验和加解密之前需要先看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. 小程序代码: ...
把jquery city-picker地区选择插件数据改成微信小程序省市地区数据一样（php代码抓取微信小程序地区数据）
原版插件 https://github.com/tshi0912/city-picker 资源下载 https://download.csdn.net/download/jianye112/12036 ...
如何抓取微信小程序的数据？
2017年1月份备受关注的微信小程序功能正式上线了,好多知名平台纷纷推出了自己的微信小程序,例如大众点评.美团外卖.京东购物.对于我们爬虫开发者来说这绝对是好事情,意味着又多了一个数据来源,又多了一种 ...
微信小程序过滤html,微信小程序中数据过滤的实现方法介绍（代码）
本篇文章给大家带来的内容是关于微信小程序中数据过滤的实现方法介绍(代码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 因为微信小程序的wxml和js的内部实现机制是分开编译的.所 ...
微信小程序：数据存储、传值、取值
小程序界面传值父级界面:A界面子级界面:B界面一.url传值详细的配置参数可以查看组件导航:navigator,这里不再做过多的解释. 1. 正向传值:A界面 –>B界面用 navig ...
微信小程序开发双重for循环, wx: if else 语法
微信小程序开发双重for循环 (多重for循环) 重点在于 wx:for-item="problemItem" 和 wx:for-index="idx" 确定 ...

微信小程序选项卡(数据双层循环)

第一种：swiper选项卡，可点击可滑动（swiper自带了一个150的高度，高度不好控制）

第二种，只点击

微信小程序选项卡(数据双层循环)相关推荐

最新文章

热门文章

微信小程序 选项卡(数据双层循环)

第一种：swiper选项卡，可点击可滑动（swiper自带了一个150的高度，高度不好控制）

第二种，只点击

微信小程序 选项卡(数据双层循环)相关推荐

最新文章

热门文章

微信小程序选项卡(数据双层循环)

微信小程序选项卡(数据双层循环)相关推荐