微信小程序scroll-view和swiper结合使用(附带图片,超详细)

微信小程序scroll-view和swiper结合使用

大家好，今天我们来学习一下scroll-view和swiper结合使用，好好看，好好学，超详细的。（这里我没有用动态的数据，我怕有些小伙伴看不懂我就用静态的数据）

第一步

首先，我们来了解一下微信小程序scroll-view和swiper的组件，进入小程序官方文档

第二步

直接上代码

<!-- 导航 -->
<scroll-view scroll-x enable-flex scroll-with-animation class="navScroll">
  <view id="{{'scroll'+ item.id}}" class="navItem">
    <view class="navContent {{navId == 0?'active':'' }}" bindtap="changNav" data-id="0">
      品牌介绍
    </view>
  </view>
  <view id="{{'scroll'+ item.id}}" class="navItem">
    <view class="navContent {{navId == 1?'active':'' }}" bindtap="changNav" data-id="1">
      专利认证
    </view>
  </view>
  <view id="{{'scroll'+ item.id}}" class="navItem">
    <view class="navContent {{navId == 2?'active':'' }}" bindtap="changNav" data-id="2">
      售后保险
    </view>
  </view>
  <view id="{{'scroll'+ item.id}}" class="navItem">
    <view class="navContent {{navId == 3?'active':'' }}" bindtap="changNav" data-id="3">
      加入我们
    </view>
  </view>
</scroll-view>

<swiper class="top_swiper" circular bindchange="topSwiper" current="{{currentId}}" style="height: {{windowHeight}}rpx;line-height: {{windowHeight}}rpx;">
  <swiper-item duration="{{duration}}">
    <view class="swiperItem" style="background-color: red;">A</view>
  </swiper-item>
  <swiper-item duration="{{duration}}">
    <view class="swiperItem" style="background-color: black;">B</view>
  </swiper-item>
  <swiper-item duration="{{duration}}">
    <view class="swiperItem" style="background-color: blue;">C</view>
  </swiper-item>
  <swiper-item duration="{{duration}}">
    <view class="swiperItem" style="background-color: orange;">D</view>
  </swiper-item>
</swiper>

.navScroll {
  display: flex;
  white-space: nowrap;
  height: 80rpx;
  background-color: rgba(83, 83, 83, 100);
  position: fixed;
  top: 0;
  z-index: 100;
}

.navScroll .navItem {
  width: calc(100%/4);
  font-size: 20rpx;
  border: 0rpx solid red;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navScroll .navItem .active {
  background-color: rgba(238, 205, 141, 100);
  color: rgba(255, 255, 255, 100);
}

.navScroll .navContent {
  width: 60%;
  height: 48rpx;
  line-height: 48rpx;
  border-radius: 24rpx;
  border: 0rpx solid red;
  text-align: center;
  color: rgba(238, 205, 141, 100);
}

.top_swiper{
  width: 100%;
  text-align: center;
  color:#FFF;
  
}

.swiperItem{
  width: 100%;
  height: 100%;
}

// pages/test/test.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navId: 0, //导航栏id
    windowHeight: '', //屏幕的高度
    currentId: 0 //swiper下标
  },
  topSwiper(event) {
    let navId = event.detail.current; //获取swiper下标
    console.log(event.detail.current)
    this.setData({
      navId
    })
  },
  //导航栏
  changNav(event) {
    let navId = event.currentTarget.dataset.id; //获取导航栏下标
    let windowHeight = this.data.windowHeight; //
    console.log(windowHeight)
    if (this.data.currentId == navId) {
      return false;
    } else {
      this.setData({
        currentId: navId
      })
    }
    this.setData({
      navId,
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //获取屏幕高度
    let that = this;
    wx.getSystemInfo({
      success: function (res) {
        let clientHeight = res.windowHeight,
          clientWidth = res.windowWidth,
          rpxR = 750 / clientWidth;
        let calc = clientHeight * rpxR;
        console.log(calc);
        console.log(rpxR);
        that.setData({
          windowHeight: calc,
        });
      }
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

如图所示：

结语

关于微信小程序scroll-view和swiper结合使用就介绍到这里 ，欢迎大家多多指教，互相交流，一起学习