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

最新推荐文章于 2024-06-05 07:15:00 发布
最新推荐文章于 2024-06-05 07:15:00 发布
阅读量9.3k 收藏 32
点赞数
分类专栏： 小程序 文章标签： 微信小程序swiper swiper卡死 swiper滑动优化 微信小程序swiper卡死 微信小程序swiper优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/harmsworth2016/article/details/108687523
版权

系列文章目录

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

文章目录

前言

在上一篇文章，讲解了再微信小程序中如何实现页面上下滚动、左右滑动。但是，此处有2个缺陷。

  • 当有多少个可以滑动的页面时，就会渲染多少个组件
  • 当快速的左右滑动时，swiper 会出现卡死（无限循环滑动）的现象
    那么我们可以考虑在每次渲染 swiper-item 时，最多渲染 3 个，动态生成可滑动的页面，于是就做出了如下效果的页面。
    在这里插入图片描述
    最多只有 3 个 swiper-item，在左右滑动时，由于下标不时的轮询，而且 swiper 的自动切换并非是无缝切换的，故在滑动 swiper-item 时，会出现向右滑动产生向左的动画效果，向左滑动产生向右的动画效果。

在这里插入图片描述

项目结构

├── index
│   ├── index.js
│   ├── index.json
│   ├── index.wxml
│   └── index.wxss
├── pretest
│   ├── pretest.js
│   ├── pretest.json
│   ├── pretest.wxml
│   └── pretest.wxss
├── test
│   ├── test.js
│   ├── test.json
│   ├── test.wxml
│   └── test.wxss

解决问题1

当有多少个可以滑动的页面时，就会渲染多少个组件

1.pretest页面

  • pretest.js
Component({
  data: {
    quesArr: [
      {
        currentGcolor: '#ccc',
        currentGscore: 3,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '单选题',
        id: 0,
      },
      {
        currentGcolor: '#ccc',
        currentGscore: 0,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '多选题',
        id: 1,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题1',
        id: 2,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题2',
        id: 3,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题3',
        id: 4,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题4',
        id: 5,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题5',
        id: 6,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题6',
        id: 7,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题7',
        id: 8,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题8',
        id: 9,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题9',
        id: 10,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题10',
        id: 11,
      },
      {
        currentGcolor: '#0AC013',
        currentGscore: 5,
        currentFcolor: '#0AC013',
        currentFscore: 5,
        typeName: '判断题11',
        id: 12,
      },
    ]
  },
  methods: {
    onTest (e) {
      const currentTab = e.currentTarget.dataset.index
      const quesArr = this.data.quesArr
      wx.navigateTo({
        url: '/pages/test/test',
        success: function(res) {
          // 通过eventChannel向被打开页面传送数据
          res.eventChannel.emit('acceptDataFromOpenerPage', { currentTab,  quesArr})
        }
      })
    }
  },
})
  • pretest.json
{
  "usingComponents": {}
}
  • pretest.wxml
<view class="p_con">
  <view wx:for="{{quesArr}}" wx:key="id" class="p_item" wx:for-index="idx" bindtap="onTest" data-index="{{idx}}">
    {{idx + 1}}-{{item.typeName}}
  </view>
</view>
  • pretest.wxss
.p_con{
  padding: 30rpx 26rpx;
  box-sizing: border-box;
}
.p_item{
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-bottom: 2rpx solid #e8e8e8;
}
.p_item:last-child{
  margin-bottom: 0;
}

代码如下（示例）：

import numpy as np
import pandas as pd
import matplotlib.pyplot as plt
import seaborn as sns
import warnings
warnings.filterwarnings('ignore')
import  ssl
ssl._create_default_https_context = ssl._create_unverified_context
  • 页面效果
    在这里插入图片描述

2.test页面

  • test.js
let eventChannel
Component({
  behaviors: [require('miniprogram-computed')],
  computed: {
    // 待渲染的数组
    rQuesArr (data) {
      const {currentTab, quesArr} = data
      return quesArr.filter((v, i) => i <= currentTab + 1 && i >= currentTab - 1)
    },
    quesLen (data) {
      return data.quesArr.length
    },
    curQuesObj (data) {
      return data.quesArr[data.currentTab]
    },
    quesTitle (data) {
      const {curQuesObj} = data
      return curQuesObj ? curQuesObj.typeName : ''
    },
    currentGcolor (data) {
      const {curQuesObj} = data
      return curQuesObj ? curQuesObj.currentGcolor : ''
    },
    currentGscore (data) {
      const {curQuesObj} = data
      return curQuesObj ? curQuesObj.currentGscore : ''
    },
    currentFcolor (data) {
      const {curQuesObj} = data
      return curQuesObj ? curQuesObj.currentFcolor : ''
    },
    currentFscore (data) {
      const {curQuesObj} = data
      return curQuesObj ? curQuesObj.currentFscore : ''
    },
  },
  data: {
    quesArr: [],
    // 待渲染的数组下标
    rCurrentTab: 0,
    // 真实数组下标
    currentTab: 0,
  },
  /*组件生命周期*/
  lifetimes: {
    ready: function () {
      eventChannel = this.getOpenerEventChannel()
      eventChannel.on('acceptDataFromOpenerPage', (data) => {
        const {currentTab, quesArr} = data
        this.setData({
          currentTab,
          quesArr
        })
      })
    },
  },
  methods: {
    switchTab (e){
      if (e.detail.source === 'touch') {
        let cur = e.detail.current;
        let ctab = this.data.currentTab
        // 下标为0时，禁止向左滑动
        if (cur === 0 && this.data.currentTab === 0) {
          return
        }
        // 下标为最大值时，禁止向右滑动
        if (cur === this.data.rQuesArr.length - 1 && this.data.currentTab === this.data.quesLen - 1) {
          return
        }
        if (this.data.rCurrentTab === cur) {
          if (this.data.currentTab === this.data.quesLen - 1) {
            return
          }
          if (cur === this.data.rQuesArr.length - 1) {
            // 向右滑动
            cur = 0
            ctab = this.data.currentTab + 1
          } else if (cur === 0) {
            // 向左滑动
            cur = this.data.rQuesArr.length - 1
            ctab = this.data.currentTab - 1
          }
        } else if (this.data.rCurrentTab < cur) {
          ctab = ctab + 1
        } else {
          ctab = ctab - 1
        }
        this.setData({
          currentTab: ctab
        })
        this.setData({
          rCurrentTab: this.getCur(cur)
        })
      }
    },
    getCur (cur) {
      if (this.data.currentTab === this.data.quesLen - 1) {
        return this.data.rQuesArr.length - 1
      } else if (this.data.currentTab === 0) {
        return 0
      }
      return cur
    }
  },
})
  • test.json
{
  "usingComponents": {}
}
  • test.wxml
<view class="top_wrap box flexbox_y flexbox_between">
  {{quesTitle}}
</view>
<view class="center_wrap maxw ova">
  <swiper current="{{rCurrentTab}}" bindanimationfinish="switchTab" class="maxh">
    <swiper-item wx:for="{{rQuesArr}}" wx:for-index="idx" wx:key="subNum" duration="0">
      <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: {{currentGcolor}}">{{currentGscore}}</text><text style="color: {{currentFcolor}}">/{{currentFscore}}</text></view>
  <view>{{currentTab + 1}}<text class="sch-ccc">/{{quesLen}}</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;
}
  • 页面效果
    在这里插入图片描述

解决问题2

步骤如下：

  • 将 swiper 的 bindchange 函数替换成 bindanimationfinish函数
    在这里插入图片描述

  • 在改变 swiper 的 current 值前检测 source 字段来判断是否是由于用户触摸引起
    在这里插入图片描述

if (e.detail.source === 'touch') {
}

总结

此处的左右滑动虽然解决了渲染 swiper-item 过多的问题，但是 swiper 组件并不能良好的无缝切入下一个页面，每次滑动的效果不尽如意。
各位看官，你们有什么思路呢？欢迎留言！

参考

harmsworth2016
关注
  • 0
    点赞
  • 踩
  • 32
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序上下滚动的方法
robin_sky的博客
11-14 9515
1、不使用scroll-view组件 1、查看自己代码中page的属性 如果你的page样式中含有overflow属性，且属性值为hidden，将其去掉，若去不掉则加入下代码： page { overflow-y: auto !important; } 2、查看自己的顶级盒子view的样式 若 样式中含有display属性，且属性值为flex，将其去掉即可 2、使...
uniapp-微信小程序实现swiper左右滚动切换tab，上下滚动加载列表
weixin_51002293的博客
11-05 4263
也需要自定义，由于目前我的系统自带的还是正常的，所以还没有改造，但是体验没有scroll-view的好，因为顶部tab会遮挡下拉刷新的loading状态，后期再改造。3. 每个tab下的list的加载完成状态也需要隔离开，否则导致tab1切换到tab2以后，tab2将控制加载完成的状态改为true后，返回tab1无法加载第2页了。2. 由于最开始的代码是每次切换tab后都会重新请求，导致swiper还没切换成功的过程中，显示的列表错误。1. swiper高度问题，导致滑动不到最底部和最顶部。
【微信小程序开发】小程序中的上滑加载更多，下拉刷新是如何实现的？
最新发布
景天科技苑
06-05 2万+
小程序是如何实现下滑加载更多数据，下拉刷新页面的，本文就来详细探讨一下。
微信小程序分页效果实现
阵雨的博客
12-13 9868
index.js // pages/bianmin/bianmin.js var p = 0 var GetList = function (that) { wx.request({ url: url, method: "POST", data: { page: p }, header: { 'content-type': 'a
微信小程序页面上下滚动、左右滑动（一）
harmsworth的博客
09-17 5839
页面上下滚动、左右滑动前言效 前言 最近需要完成一个小程序页面头部、底部固定；页面中间部分上下滚动、左右滑动的需求，效果如下： 效 d
《微信小程序》swiper的疯狂循环滚动的问题
Ammyo_o的博客
09-14 5733
使用微信小程序的swiper制作banner的时候，发现一开始能够自动滚动，但是让小程序后台运行一会儿之后再进去就会出现疯狂快速滚动的问题。 上面的城市和银行数据是同步滚动的，城市的滚动是通过scroll-view来实现的，为了实现同步滚动我用了swiper的current属性来控制scroll-view的样式为选中。 &lt;scroll-view class="coopera...
微信小程序列表滚动到底部，当元素高度增加时，自动滚动出后面的元素
guairena的博客
05-16 2567
场景： 场景1、列表使用scroll-view标签的bindscrolltolower实现的分页滚动加载 场景2、列表使用view标签和onReachBottom结合实现的分页滚动加载 当滚动到最后一页最后一条数据时，该条数据可以通过按钮展开收起部分元素，默认是收起的状态，当点击按钮时会在该条数据后面展开一些元素。此时该条数据的整体高度是增大的，整个页面的高度也是增大的。 由于在展开元素前，滚动条已经滚动到最底部了，此时无法监测到页面高度增加了，导致展开的元素在最底部没有展示出来了，需要手动滚动页面后，才会
微信小程序滚动Tab实现左右可滑动切换
12-10
综上所述，实现微信小程序滚动Tab左右可滑动切换的核心在于合理利用`scroll-view`和`swiper`组件，结合数据绑定和事件处理，完成标题与内容的联动。同时，注意页面布局和适配，确保在各种屏幕尺寸下都能有良好的用户...
微信小程序页面上下滚动效果
10-16
在微信小程序中，实现页面上下滚动效果是一种常见的交互设计，它能提供良好的用户体验，使得用户可以轻松浏览和导航多内容的页面。以下我们将详细探讨如何在微信小程序中创建这种滚动效果。 首先，我们需要理解微信...
微信小程序图片横向左右滑动案例
08-30
微信小程序图片横向左右滑动案例是指在微信小程序中实现图片的横向左右滑动功能，通过使用 scroll-view 组件和 flex 布局来实现图片的水平滑动。下面将详细介绍该案例的实现步骤和相关知识点。 首先，需要在 wxml ...
微信小程序实现列表的横向滑动方式
10-15
主要介绍了微信小程序实现列表的横向滑动，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序的滑动组件---可滚动的tab栏
12-05
微信小程序 自定义组件，可以滚动的选项卡tab栏，背景颜色字体颜色自己设置
小程序 · 轮播图——上下滚动消息、禁止滑动
weixin_42091247的博客
10-14 2203
swiper禁止滑动的方法 方法一：在swiper-item增加一个catchtouchmove方法 wxml： <swiper-item catchtouchmove=“stopTouchMove”> </swiper-item> js： stopTouchMove: function() { return false; } 方法二：在navigator里边加上一个view将他定位变成一个透明的遮罩层 <view class="page-body">
微信小程序滚动Tab选项卡：左右滑动切换、触底加载分页
kingAn123的博客
05-05 8981
文章目录效果图一、顶部标签栏二、列表内容部分swiper组件高度及上下滚动样式三、数据结构及赋值方法四、scroll组件触底事件(分页相关五、scroll组件的高度样式swiper组件scroll组件样式区别六、其他 效果图 一、顶部标签栏 定位顶部便签栏，使用color-ui的组件样式实现 <scroll-view scroll-x class="bg-white nav my-...
微信小程序判断当前手势滑动方向
weixin_44157191的博客
06-01 2926
功能描述：文章适用于微信小程序根据滑动手势方向进行不同操作主要点：touchstart、touchend实现思路： 变量解释：startY(开始Y坐标)、startX(开始X坐标)、touchMoveY（结束Y坐标）、touchMoveX（结束X坐标）1.主要通过touchstart事件获取手势开始时的X、Y坐标，通过touchend获取手势结束时的X、Y坐标。 2.通过三角函数Math.atan计算角度(滑动范围)。 3.以元素左上角为原点，向右、
微信小程序 - 新闻动态 / 公告上下滚动列表（上下循环滚动，无限上下自动滚动列表）
王佳斌
05-26 5613
前言 本文实现了 无限上下自动滚动列表 组件，常见于新闻动态列表、公告等场景，可直接调用。 您可以自定义滚动间隔与显示多少个列表， 另外点击每项会触发事件，可用于跳转到详情页。 代码干净整洁，注释详细，具体如下图所示： 示例代码 推荐使用平台提供的一键复制功能，避免发生漏选难以排查。 随便找个页面，按照以下代码进行依次复制。 <!-- display-multiple-items: 显示的滑块数量(显示几个列表)，注意对应CSS也要更改，保持总高度与每项高度成"正比"，详见CSS文件。 -
微信小程序：scroll-view自动滚动到最底部，附view标签滚动到底部方法
干饭搬砖两不误。
01-06 2万+
微信小程序：自动滚动到最底部简介具体实现 简介 小程序某项目中有个需求：用户进入聊天页，自动到最底部，发送（接收）新消息也到最底部。 由于本身是小程序，且有支持的方法了，所以没有采用计算内容的高度，通过设置 scroll-top 的值，达到效果的方法（代码 冗余没必要）。 小程序API中有标签组件，该组件有个方法：scroll-into-view（值应为某子元素id（id不能以数字开头）。设置哪个...
微信小程序ios可以上下左右拖动的问题
qq_40666120的博客
09-16 1916
page { width:100%; overflow-x:hidden; }
微信小程序实现滑动/点击切换Tab
苏苏就是小苏苏的博客
12-01 1万+
👏 swiper+scroll-view实现滑动/点击切换Tab，以及scroll-left的使用~ 🥇文末分享源代码。记得点赞+关注+收藏！
前端学习笔记-微信小程序学习笔记
01-09
本篇前端学习笔记主要聚焦于微信小程序的开发，深入讲解了小程序页面的构建、配置文件的作用以及代码构成。首先，我们了解到小程序页面由JSON配置文件来定义，如app.json、project.config.json和sitemap.json，它们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值