微信小程序页面上下滚动、左右滑动(一)

系列文章目录

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

页面上下滚动、左右滑动

前言

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

效果

在这里插入图片描述

代码

  • 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
    !](https://img-blog.csdnimg.cn/20200917231004907.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhcm1zd29ydGgyMDE2,size_16,color_FFFFFF,t_70#pic_center)
    基础调试库 2.12.2
    在这里插入图片描述
    基础调试库 2.12.2
    在这里插入图片描述
    因为 page 标签突然多了几个属性,变成了绝对定位,故修改了 pageposition 属性值为默认值。

总结

  • 使用 swiper 实现滑动会渲染非常多组件。例如:滑动50个页面,那么需要渲染50个页面,滑动频繁了页面会卡死,而且,渲染50个页面,也很浪费性能,下一节进行讲解并优化。
  • page 出现的属性不同问题,百思不得其解。
  • 1
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在小程序中,可以使用scroll-view组件来实现页面滚动。要实现页面直接滑动到最底端,可以在scroll-view组件中设置一个id属性,并在页面加载完成后使用wx.createSelectorQuery()获取该组件的节点信息,然后使用节点信息中的scrollHeight属性设置scroll-view的滚动位置。 具体实现步骤如下: 1. 在scroll-view组件中设置id属性,例如: ``` <scroll-view id="my-scroll-view" style="height: 100vh;"> <!-- 页面内容 --> </scroll-view> ``` 2. 在页面的onLoad函数中,使用wx.createSelectorQuery()获取scroll-view组件的节点信息: ``` onLoad: function () { let that = this; wx.createSelectorQuery().select('#my-scroll-view').boundingClientRect(function(rect){ that.setData({ scrollViewHeight: rect.height // 将scroll-view的高度存储到页面数据中 }); }).exec(); } ``` 3. 在页面的onReady函数中,使用wx.pageScrollTo()将scroll-view滚动到底部: ``` onReady: function () { let that = this; wx.createSelectorQuery().select('#my-scroll-view').boundingClientRect(function(rect){ that.setData({ scrollViewHeight: rect.height // 将scroll-view的高度存储到页面数据中 }); wx.pageScrollTo({ scrollTop: rect.height // 将页面滚动到最底部 }); }).exec(); } ``` 通过以上步骤,就可以实现页面直接滑动到最底部的效果。需要注意的是,在获取scroll-view节点信息时,需要使用wx.createSelectorQuery().select()方法,而不是wx.createSelectorQuery().selectAll()方法。因为后者会获取到多个节点信息,无法正确地获取scroll-view的高度。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值