swiper左右滑菜单选中放大-微信小程序

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

唐屁屁儿

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

阅读量774

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_44169843/article/details/123084554

版权

微信小程序同时被 2 个专栏收录

4 篇文章

订阅专栏

swiper

1 篇文章

订阅专栏


    <view class="german_vip_advantage_out">
      <view class="swiper_tab">
        <view class="swiper_tab_list {{currentItemId==item.current ? 'selected_text' : ''}} flexVerticalCenter" data-current="{{item.current + 1}}" bindtap="swichNav" wx:for="{{swiperTabList}}" wx:key='id'>
          <view class="navTitle {{currentItemId==item.current?'selected2':''}}" data-current="{{item.current}}">{{item.name}}</view>
        </view>
      </view>
      <swiper class="swiper" next-margin="62rpx" current-item-id="{{currentItemId}}" autoplay="{{false}}" previous-margin="62rpx" bindchange="swiperChange">
        <block wx:for="{{imgList}}" wx:key="index">
          <swiper-item item-id="{{index}}" data-item-id="{{index}}" bindtap='clickChange'>
            <view class='li centerAlignment'>
              <image class="li_img {{currentItemId == index ? 'selected' : 'notselected'}}" src="{{item}}"></image>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>

.german_vip_advantage_out {
  width: 100%;
  height: 580rpx;
  background-size: cover;
  margin-top: -2rpx;
}

.swiper_tab {
  width: 100%;
  height: 100rpx;
}

.swiper_tab_list {
  float: left;
  width: 33.3%;
  font-size: 30rpx;
}

.selected_text {
  color: #FFFFFF;
  font-weight: bold;
}

.navTitle {
  color: #EEC27F;
  height: 100%;
  line-height: 75rpx;
}

.selected2 {
  color: #FDF8F1;
}

.swiper {
  width: 100%;
  height: 409rpx;
}

.li {
  width: 624rpx;
  height: 409rpx;
}

.li_img {
  width: 624rpx;
  height: 409rpx;
  margin: 0 auto;
  transform: scale(1);
}

.selected {
  animation: bormax 0.7s;
}

@keyframes bormax {
  from {
    transform: scale(0.9);
  }

  to {
    transform: scale(1);
  }
}

.notselected {
  transform: scale(0.9);
}

app.wxss公共样式

.flexVerticalCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexVerticalCenterColumn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.flexCenter {
  display: flex;
  align-items: center;
}
.flexCenterLineToIts{
  display: flex;
  justify-content: center;
}
.flexBetween {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

 /**
   * 页面的初始数据
   */
  data: {
    currentItemId: 1, //浏览图片id
    imgList: ['图片链接', '图片链接', '图片链接'], //图片数组
    swiperTabList: [{
      current: 0,
      name: '标题栏1',
    }, {
      current: 1,
      name: '标题栏2',
    }, {
      current: 2,
      name: '标题栏3',
    }], //标题数组
  },


//swiper点击事件
  swichNav: function (e) {
    var _this = this;
    if (this.data.currentItemId == e.target.dataset.current) {
      return false;
    } else {
      _this.setData({
        currentItemId: e.target.dataset.current
      })
    }
  },

  //swiper滑动事件
  swiperChange: function (e) {
    var currentItemId = e.detail.currentItemId;
    this.setData({
      currentItemId: currentItemId
    })
  },

  //swiper-item点击事件
  clickChange: function (e) {
    var itemId = e.currentTarget.dataset.itemId;
    this.setData({
      currentItemId: itemId
    })
  },