• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序 - swiper中嵌套使用scroll-view

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

效果如下

需要注意的地方

swiper标签有默认的高度,展示更多的话需要另外设置height值

这里的scroll-view设置占满整个屏幕,height设置100%;swiper的height设置成屏幕的高度(除去tab栏的高度),需要微信提供的api获取设备屏幕高度数据

wx.getSystemInfo({
  success: (res) => {
    let windowHeight = res.windowHeight

    this.setData({
      windowHeight: windowHeight
    })
  }
})

wx.getSystemInfo API还可以获取以下信息,包括brand( 品牌)、model(型号)、platform(系统)等

.wxml

<view>
  <view class="tab">
    <view class="{{tab_index == 0 ? 'tab-active':''}}" data-index="0" catchtap="selectTab">1</view>
    <view class="{{tab_index == 1 ? 'tab-active':''}}" data-index="1" catchtap="selectTab">2</view>
    <view class="{{tab_index == 2 ? 'tab-active':''}}" data-index="2" catchtap="selectTab">3</view>
  </view>

  <swiper 
    style="height: {{windowHeight - 50}}px"
    bindchange="tabChange"
    current="{{tab_index}}"
  >
    <swiper-item>
      <scroll-view
        style="height: 100%;"
        scroll-y
        bindscroll="scroll"
        bindscrolltolower="reactBottom"
        scroll-with-animation
        scroll-top="{{scrollTop0}}px"
      >
        <block wx:for="{{30}}" wx:key="{{index}}">
          <view class="item item1">{{index + 1}}</view>
        </block>
      </scroll-view>
    </swiper-item>

    <swiper-item>
      <scroll-view
        style="height: 100%;"
        scroll-y
        bindscroll="scroll"
        bindscrolltolower="reactBottom"
        scroll-with-animation
        scroll-top="{{scrollTop1}}px"
      >
        <block wx:for="{{30}}" wx:key="{{index}}">
          <view class="item item2">{{index + 1}}</view>
        </block>
      </scroll-view>
    </swiper-item>

    <swiper-item>
      <scroll-view
        style="height: 100%;"
        scroll-y
        bindscroll="scroll"
        bindscrolltolower="reactBottom"
        scroll-with-animation
        scroll-top="{{scrollTop2}}px"
      >
        <block wx:for="{{30}}" wx:key="{{index}}">
          <view class="item item3">{{index + 1}}</view>
        </block>
      </scroll-view>
    </swiper-item>
  </swiper>
  
  <view class="backTop" catchtap="backTop"></view>
</view>

.css

.item {
  margin-bottom: 20rpx;
  width: 100%;
  height: 100rpx;
  text-align: center;
  line-height: 100rpx;
}

.item1 {
  background: lightblue;
}

.item2 {
  background: lightgrey;
}

.item3 {
  background: lightgreen;
}

.item:last-child {
  margin-bottom: 0;
}

.tab {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100rpx;
  line-height: 100rpx;
  box-sizing: border-box;
}

.tab-active {
  border-bottom: 2rpx solid orangered;
}

.tab > view {
  flex: 1;
  text-align: center;
}

swiper {
  position: fixed;
  top: 100rpx;
  left: 0;
  bottom: 0;
  width: 100%;
}

.backTop {
  position: fixed;
  right: 30rpx;
  bottom: 50rpx;
  width: 100rpx;
  height: 100rpx;
  background: rgba(0, 0, 0, 0.5);
  z-index: 30;
  border-radius: 50%;
}

.js

// pages/swiper2/swiper2.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tab_index: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.systemType()
  },
  
  scroll (event) {
    console.log(event)
  },

  reactBottom () {
    console.log('触底-加载更多')
  },

  // 获取设备屏幕高度
  systemType () {
wx.getSystemInfo({
  success: (res) => {
    let windowHeight = res.windowHeight

    this.setData({
      windowHeight: windowHeight
    })

    console.log(res)
  }
})
  },

  tabChange (event) {
    this.setData({
      tab_index: event.detail.current
    })
  },

  // tab栏选择
  selectTab (event) {
    this.setData({
      tab_index: event.currentTarget.dataset.index
    })
  },

  // 返回顶部
  backTop () {
    let tab_index = this.data.tab_index

    this.setData({
      ['scrollTop' + tab_index]: 0
    })
  },
})

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap