系列文章目录

微信小程序页面上下滚动、左右滑动（二）

前言

最近需要完成一个小程序页面头部、底部固定；页面中间部分上下滚动、左右滑动的需求，效果如下：

效果

代码

• test.js

// test.js
Component({
    
  data: {
    
    quesArr: [
      {
    
        currentGcolor: '#ccc',
        currentGscore: 3,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '单选题'
      },
      {
    
        currentGcolor: '#ccc',
        currentGscore: 0,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '多选题'
      },
      {
    
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题'
      },
    ],
    currentTab: 0,
  },
  methods: {
    
    switchTab (e){
    
      if (e.detail.source === 'touch') {
    
        let cur = e.detail.current;
        this.setData({
    
          currentTab: cur,
        });
      }
    },
  },
})

• test.wxml

<!--test.wxml-->
<view class="top_wrap box flexbox_y flexbox_between">
  {
   {quesArr[currentTab].typeName}}
</view>
<view class="center_wrap maxw ova">
  <swiper current="{
     {currentTab}}" bindanimationfinish="switchTab" class="maxh">
    <swiper-item wx:for="{
     {quesArr}}" wx:for-index="idx" wx:key="subNum">
      <scroll-view scroll-y class="maxh">
        <view class="center_view box">
          <view class="item">{
   {idx}}-1</view>
          <view class="item">2</view>
          <view class="item">3</view>
          <view class="item">4</view>
          <view class="item">5</view>
          <view class="item">6</view>
          <view class="item">1</view>
          <view class="item">2</view>
          <view class="item">3</view>
          <view class="item">4</view>
          <view class="item">5</view>
          <view class="item">6</view>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>
<view class="foot_wrap box flexbox_y flexbox_between">
  <view>得分：<text style="color: {
       {
       quesArr[currentTab].currentGcolor}}">{
   {quesArr[currentTab].currentGscore}}</text><text style="color: {
       {
       quesArr[currentTab].currentFcolor}}">/{
   {quesArr[currentTab].currentFscore}}</text></view>
  <view>{
   {currentTab + 1}}<text class="sch-ccc">/{
   {quesArr.length}}</text></view>
</view>

• test.wxss

page{
    
  position: static;
}
.top_wrap{
    
  height: 106rpx;
  color: #333;
  padding: 0 36rpx;
  border-bottom: 2rpx solid #E8E8E8;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.center_wrap{
    
  position: fixed;
  top: 108rpx;
  bottom: 120rpx;
  z-index: -1;
}

.center_wrap .item{
    
  height: 300rpx;
  margin: 15rpx;
}

.center_view{
    
  padding: 30rpx 36rpx;
}

.foot_wrap{
    
  height: 118rpx;
  color: #333;
  padding: 0 36rpx;
  border-top: 2rpx solid #E8E8E8;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1;
}


.flexbox_y {
    
  display: flex;
  align-items: center;
}

.flexbox_between{
    
  display: flex;
  justify-content: space-between;
}

.maxh{
    
  height: 100%;
}

.maxw{
    
  width: 100%;
}

.box{
    
  box-sizing: border-box;
}

.sch-ccc{
    
  color: #ccc;
}

.ova{
    
  overflow: auto;
}

疑问

• page 标签的默认属性有变化？
  调试基础库 2.12.1
  
  基础调试库 2.12.2
  
  基础调试库 2.12.2
  
  因为 page 标签突然多了几个属性，变成了绝对定位，故修改了 page 的 position 属性值为默认值。

总结

• 使用 swiper 实现滑动会渲染非常多组件。例如：滑动50个页面，那么需要渲染50个页面，滑动频繁了页面会卡死，而且，渲染50个页面，也很浪费性能，下一节进行讲解并优化。
• page 出现的属性不同问题，百思不得其解。