小程序picker选择器和tab选项卡

最新推荐文章于 2024-04-27 19:48:28 发布

panpanpanqvq

最新推荐文章于 2024-04-27 19:48:28 发布

阅读量535

点赞数

分类专栏： picker 微信小程序文章标签：小程序 js

本文链接：https://blog.csdn.net/panpanpanqvq/article/details/106409418

版权

本文记录了在小程序中如何将picker选择器与tab选项卡进行结合使用的方法，通过在picker组件中直接编写tab选项，实现了交互效果。详细内容包括WXML结构和JS逻辑，帮助开发者了解这一实现过程。

摘要由CSDN通过智能技术生成

碰见了就记录一下，tab选项卡式的picker。
就直接在picker里写tab选项就可以
wxml:

<view class="swiper-tab">
    <picker class="swiper-tab-item {
  {currentTab==0?'active':''}}" data-current="0" bindtap="clickTab" bindchange="pickChange" value="{
  {objindex}}" range="{
  {objarray}}">
        {
  {objarray[objindex]}}
    </picker>
 
    <picker class="swiper-tab-item {
  {currentTab==1?'active':''}}" data-current="1" bindtap="clickTab" bindchange="bindPickerChange" value="{
  {index}}" range="{
  {array}}">{
  {array[index]}}
    </picker>
</view>

<swiper current="{
  {currentTab}}" duration="300"  bindchange="swiperTab">
    <swiper-item >