【微信小程序】swiper滑动页面，滑块左右各露出前后的一部分，露出一部分

常安cc

已于 2022-07-26 18:00:40 修改

阅读量1.4k

点赞数 1

分类专栏：微信小程序前端文章标签：微信小程序 javascript 前端

于 2022-07-26 17:58:20 首次发布

本文链接：https://blog.csdn.net/m0_55546349/article/details/125999790

版权

前端同时被 2 个专栏收录

92 篇文章 5 订阅

订阅专栏

微信小程序

32 篇文章 1 订阅

订阅专栏

在这里插入图片描述

<!--pages/vip/vip.wxml-->
<view class="pageBox">
  <swiper class="swiper" current="{{currentTab}}" next-margin="50rpx" previous-margin="50rpx" bindchange="switchTab" style="width: 100%;height:400rpx;position: absolute;top:{{40*2}}rpx;left: 0;z-index: 999;">
    <block wx:for="{{4}}" wx:key="index">
      <swiper-item item-id="{{index}}" data-item-id="{{index}}" bindtap='clickChange'>
        <view class='li'>
          <image class="vipImg" src="/image/vip{{index}}.png"></image>
        </view>
      </swiper-item>
    </block>
  </swiper>
  <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab">
    <swiper-item wx:for="{{4}}" wx:key="index">
      <scroll-view scroll-y="true" class="scoll-h">
        <image class="bgImg" src="/image/vip{{index}}Bg.png" show-menu-by-longpress></image>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

/* pages/vip/vip.wxss */
page {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  background-color: #1a1728;
}

.pageBox { 
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #1a1728;

}
    

 
.vipImg {
  width: 95%;
  height: 90%;
  position: relative;
}

.vipImg:nth-child(4) {
  width: 120%;
  height: 90%;
  position: relative;
}
  
.tab-content,
.bgImg {
  width: 100%;
  height: 100%;
}

.scoll-h {
  height: 100%;
}

.scrollBox {
  /* background-color: pink; */
  height: 380rpx;
  display: flex;
  flex-wrap: nowrap;
  width: 400%;
}

.vipCurrImg {
  position: absolute;
  top: 25%;
  left: 48%;
  width: 104rpx;
  height: 40rpx;
}
 
.li {
  width: 100%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {  
    currentTab: 0, //预设当前项的值
  }, 
 
  // 滚动切换标签样式
  switchTab: function (e) {
    console.log('swiper', this.data.currentTab);
    console.log('swiper', e.detail.current);
    this.setData({
      currentTab: e.detail.current,
    });
    console.log(e.detail.current);
    // this.checkCor();
  },