微信小程序滑块视图容器

最新推荐文章于 2024-09-24 15:00:05 发布

Neverdrophair

最新推荐文章于 2024-09-24 15:00:05 发布

阅读量556

点赞数 1

文章标签：微信小程序容器小程序

本文链接：https://blog.csdn.net/Neverdrophair/article/details/122466919

版权

效果图如下：

完成以上效果需：

wxml部分：

<view class="nav">
  <block wx:for="{{styles}}" wx:key="styles">
    <view class="{{item.class}}" data-index="{{index}}" bind:tap="tab">{{item.text}}</view>
  </block>
</view>

<swiper circular="" current="{{index}}" bind:change="changetab">
  <swiper-item>
    <view class="cnt" style="background-color: red;">商品介绍区域1111111</view>
  </swiper-item>
  <swiper-item>
    <view class="cnt" style="background-color: yellow;">规格参数区域2222222</view>
  </swiper-item>
  <swiper-item>
    <view class="cnt" style="background-color: green;">售后保障区域3333333</view>
  </swiper-item>
</swiper>

js部分:

注意：要在js页面顶端引入

const obj = require('../../utils/function')

  data: {
      styles:[
        {class:'now',text:'商品详情'},
        {class:'',text:'规格参数'},
        {class:'',text:'售后保障'},
      ],
      index:0
  },
  tab(evt){
    console.log(evt)
    let index = evt.target.dataset.index;
    let styles = this.data.styles;
    let ret = obj.fn(styles,index);
    this.setData(ret);
  },
  // 滑动切换
  changetab(evt){
    let index = evt.detail.current;
    let styles = this.data.styles;
    let ret = obj.fn(styles,index);
    this.setData(ret);
  },

wxss部分：

.nav{
  display: flex;
  justify-content: space-around;
  /* justify-content: space-around; */
  margin-top: 10px;
}
.now{
  color: red;
}
.cnt{
  width: 700rpx;
}

封装方法：

function fn(styles, index = 0){
  styles.map((item,key)=>{
    if(key == index){
      return item['class'] = 'now';
    }else{
      return item['class'] = '';
    }
  })
  return{
    index,
    styles
  };
}

module.exports = {
  fn:fn
}