微信小程序并没有tab选项卡,但是有一个swiper,所以用swiper写了一个选项卡,写完之后存在一个问题,swiper的默认高度为150px,不能通过给他auto或者百分百自适应,所以经过查阅,用js实现了想要的效果。
wxml
<view class = "tab">
<view bindtap = "titleClick" class="{
{0 == currentIndex ? 'active' : ''}}" data-idx='0'>全部</view>
<view bindtap = "titleClick" class="{
{1 == currentIndex ? 'active' : ''}}" data-idx='1'>一级报警</view>
<view bindtap = "titleClick" class="{
{2 == currentIndex ? 'active' : ''}}" data-idx='2'>二级报警</view>
</view>
<swiper style='height:{
{widHeight}}' bindchange='pagechange' current='{
{currentIndex}}'>
<swiper-item>
<view class = "list">
<view class = "one oneAll" wx:for = "{
{all}}" wx:key = "index">
<!-- 使用 wx:for-item 可以指定数组当前元素的变量名,使用 wx:for-index 可以指定数组当前下标的变量名: 否则默认为index和item-->
<view class = "left">
<view class = "personal">
<image class = "photo" src = "../../images/mine/icon-test.png"></image>
<view class = "desc">
<view class = "name">
<text class = "mz">{
{
item.name}}</text>
<text class = "age">{
{
item.age}}</text>
</view>
<text class = "address">{
{
item.address}}</text>
<view class = "state">
<image src = "../../images/mine/xingxing.png"></image>
<text class = "both">检测状态:</text>
<text class = "normal">{
{
item.state}}</text>
</view>
</view>
</view>
</view>
<view class = "right">
<image src = "../../images/mine/qianjin.png"></image>
</view>
</view>
</view>
</swiper-item>
<swiper-item>
<view class = "list">
<view class = "one" wx:for = "{
{one}}" wx:for-item = "oneItem" wx:key = "index">