微信小程序---选项卡

小程序选项卡

<view class="box">
<view class="item '{{index===0?'active':''}}'" data-index="{{0}}" bindtap="fn">1</view>
<view class="item '{{index===1?'active':''}}'" data-index="{{1}}" bindtap="fn">2</view>
<view class="item '{{index===2?'active':''}}'" data-index="{{2}}"  bindtap="fn">3</view>
<view class="item '{{index===3?'active':''}}'" data-index="{{3}}"  bindtap="fn">4</view>
</view>
<view class="bottom">
<view class="list '{{index===0?'one':''}}'"  data-index="{{0}}"  bindtap="fn">1</view>
<view class="list '{{index===1?'one':''}}'"  data-index="{{1}}" >2</view>
<view class="list '{{index===2?'one':''}}'" data-index="{{2}}" >3</view>
<view class="list '{{index===2?'one':''}}'" data-index="{{4}}" >4</view>
</view>

/* pages/test/test.wxss */
.box{width: 100%;height:100rpx;background-color: chocolate;display: flex
}
.item{width:25%;height: 100rpx;justify-content: space-around;text-align: center;line-height: 100rpx;
}
.bottom{width: 100%;height: 500rpx;position: relative;
}
.active{background-color: cyan;
}
.list{width: 100%;height: 500rpx;position: absolute;left: 0;top: 0;
background-color: #ccc;
text-align: center;
line-height: 500rpx;}
.one{z-index: 1;
}

Page({/*** 页面的初始数据*/data: {index:2},
fn(e){console.log(111);console.log(this.data)console.log(e);// let index=e.target.dataset.index;let {index}=e.target.dataset;console.log(index);this.setData({index})
}
})

微信小程序---选项卡相关推荐

微信小程序选项卡数组列表单项选择切换效果
这里展示一个工作中用到的微信小程序的单选选项卡切换效果的制作方法效果如图: wxml:<view class="item" wx:for="{{data}}&qu ...
微信小程序选项卡、列表动态显示按钮
小程序选项卡功能实现 wxml页面: 先给选项卡赋值data-current="待确认" 添加点击事件bindtap="clickTab", 在js里click ...
微信小程序选项卡swiper默认高度150px（让高度实现自适应）怎么解决?
首先:个人感觉这是小程序的一个bug(相信以后会修复的),默认高度是150px,而且不能通过css控制让高度自适应(就是给高一个auto,在这里不起作用!!!),百度了好多方法,觉得有用的是给swip ...
微信小程序选项卡(数据双层循环)
第一种:swiper选项卡,可点击可滑动(swiper自带了一个150的高度,高度不好控制) html  <view class='topTabSwiper' ...
微信小程序设置底部tab选项卡
微信小程序选项卡用到tabbar组件. 在app.json中添加tabbar组件即可.(输入会自动补全) list存放的就是tab选项卡了.一个对象就是一个选项卡,官方规定为2到5个.text是文本提 ...
微信小程序开发导航：精品教程+网友观点+demo源码（5月9日更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序导航：免费视频+精品教程+DEMO集合（长期更新）
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
微信小程序购物车操作
表字段 user 评论表商品表订单表 wxml页面  <view class="swiper-tab"><vie ...
微信小程序开发之选项卡
选项卡是web开发中经常使用到的一个模块,在小程序中竟然没有,这里参考别人的文章自己做了一个双选项卡实现思路: 通过绑定swichNav事件来控制currentTab(当前选项卡)和isShow(是 ...
微信小程序Tab选项卡切换大集合
代码地址如下: http://www.demodashi.com/demo/14028.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...

微信小程序---选项卡

微信小程序---选项卡相关推荐

最新文章

热门文章