小程序swiper demo

最新推荐文章于 2023-07-11 08:38:36 发布
最新推荐文章于 2023-07-11 08:38:36 发布
阅读量262 收藏
点赞数
原文链接：https://my.oschina.net/igoryuyu/blog/1935405
版权

小程序swiper demo

demo的性能太差，仅仅是提供思路，实际应用中需要优化
纯js实现swiper

方案1（需要优化性能、上下滚动）

swiper.js

function swiper(that) {
  that.handleStart = handleStart
  that.handleMove = handleMove
  that.handleEnd = handleEnd
}
/*
* @触摸起点
* @获取起点时间，起点坐标
*/
function handleStart(e){
  const { timeStamp } = e // 起点时间
  const { clientX, clientY } = e.touches[0] //起点坐标
  this.setData({ 
    touching: true,
    startX: clientX,
    startY: clientY,
    startTime: timeStamp
  })
}
/*
* @触摸变换
* @坐标轴
* X -> 右， X轴自左向右自增
* Y -> 下， Y轴自上向下自增
*
* @上下滑动（|Y| > |X|)，终止计算
* @左右滑动(|Y| < |X|)，终点X坐标 - 起点X坐标 > 0
* > 0；（页面向右滑动，偏移距离增大。偏移距离 = offsetOld + |X|）
* < 0；（页面向左滑动，偏移距离减小。偏移距离 = offsetOld - |X|）
*
*/
function handleMove(e){ // 坐标变换，触摸变换触发页面左右滑动
  const { clientX, clientY } = e.touches[0]
  let { startX, startY, offsetOld } = this.data
  let _X = clientX - startX,
      _Y = clientY - startY
  if(Math.abs(_X) <= Math.abs(_Y)) 
    return this.setData({ touching: false })
  else
    this.setData({ offset: offsetOld + _X })
}
/*
* @触摸结束
*
* @上下滑动（|Y| > |X|)，终止计算
* @左右滑动(|Y| < |X|)
*
* @快速滑动： 时间最长小于300ms，最短距离50触发滑动事件  T < 300 && |X| >= 50
* @慢速滑动： T > 300 && |X| >= width/2
* index = 0 终止右移(X > 0)，并复原move效果
* index = last 终止左移(X < 0)，并复原move效果
*/
function handleEnd(e){ // 坐标变换终止
  const { timeStamp, target: { dataset: { index } } } = e // index 小圆点变换状态
  const { clientX, clientY } = e.changedTouches[0]
  let { list, startX, startY, startTime, width, offset, offsetOld } = this.data
  let T = timeStamp - startTime,
      _X = clientX - startX,
      _Y = clientY - startY,
      X = Math.abs(_X),
      Y = Math.abs(_Y)
  if(X < Y || T < 300 && X < 50 || T >= 300 && X < Math.round(width/2) || index == 0 && _X > 0 || index == list.length - 1 &&  _X < 0) {
    this.setData({
      offset: offsetOld
    })
  }else {
    // if(T <= 300) {
    //   this.setData({ duration: 300 })
    //   setTimeout(() => {
    //     this.setData({ duration: 0 })
    //   }, 300)
    // }
    if(_X < 0) width = -width
      this.setData({
        offset: offsetOld + width,
        offsetOld: offsetOld + width,
      })
  }

}
module.exports = swiper

swiper.wxss

.page-swiper{
  width:100%;
  overflow-x:hidden;
}
.swiper-content{
  display:flex;
  min-height:100vh;
}
.swiper-content .content-slider{
  width:100vh;
  position: relative;
  top:0;
  left:0;
}
.swiper-content .content-slider:nth-child(odd){
  background-color:#f5f5f5;
}
.overflow-hidden{
  overflow:hidden;
}

index.js

const swiper = require('../../../../util/swiper')
Page({
  data: {
    list: [
      {
        page: '',
        title: '展览展览'
      },
      {
        page: '',
        title: 'VIP专区VIP专区'
      },
      {
        page: '',
        title: '购票购票购票'
      },
      {
        page: '',
        title: '动态动态动态'
      }
    ],
    touching: false, // 触摸后防止抖动
    duration: 600, // 延缓动画
    offsetOld: 0, // 保留距离状态 
    offset: 0, // 向左移动的距离 
    startX: 0, // X轴起点坐标
    startY: 0, // Y轴起点坐标
    startTime: 0, // 触摸起点时间
    width: 375 //默认屏幕宽度
  },
  /*
  * @获取设备宽度
  */
  onLoad() {
    const res = wx.getSystemInfoSync()
    this.setData({ width: res.windowWidth })
    swiper(this)
  },
})

index.wxml

<view class="page-swiper" bind:touchstart="handleStart" bind:touchmove="handleMove" bind:touchend="handleEnd">
  <view class="swiper-content {{touching?'overflow-hidden':''}}" style="width:{{width*list.length}}px;transform: translate3d({{offset ? offset : 0}}px, 0px, 0px);transition-duration: {{duration}}ms;">
    <view 
      class="content-slider" 
      wx:for-items="{{list}}" 
      wx:key="{{item}}" 
      data-index="{{index}}"
    >
    <scroll-view>
      {{item.title}}
    </scroll-view>
  </view>
  </view>
</view>

index.wxss

.page-swiper{
  width:100%;
  overflow-x:hidden;
}
.swiper-content{
  display:flex;
  min-height:100vh;
}
.swiper-content .content-slider{
  width:100vh;
  position: relative;
  top:0;
  left:0;
}
.swiper-content .content-slider:nth-child(odd){
  background-color:#f5f5f5;
}
.swiper-transform {
  transform: translate3d(0px, 0px, 0px);
  transition-duration: 0ms;
}

实现2（不推荐）

index.js

Page({
  data: {
    list: [
      {
        page: '',
        title: '展览展览'
      },
      {
        page: '',
        title: 'VIP专区VIP专区'
      },
      {
        page: '',
        title: '购票购票购票'
      },
      {
        page: '',
        title: '动态动态动态'
      }
    ],
    offsetOld: 0, // 保留距离状态 
    offset: 0, // 向左移动的距离 
    startX: 0, // X轴起点坐标
    startY: 0, // Y轴起点坐标
    startTime: 0, // 触摸起点时间
    width: 375 //默认屏幕宽度
  },
  /*
  * @获取设备宽度
  */
  onLoad() {
    const res = wx.getSystemInfoSync()
    this.setData({ width: res.windowWidth })
  },
  /*
  * @触摸起点
  * @获取起点时间，起点坐标
  */
  handleStart(e){
    const { timeStamp } = e // 起点时间
    const { clientX, clientY } = e.touches[0] //起点坐标
    this.setData({ 
      startX: clientX,
      startY: clientY,
      startTime: timeStamp
    })
  },
  /*
  * @触摸变换
  * @坐标轴
  * X -> 右， X轴自左向右自增
  * Y -> 下， Y轴自上向下自增
  *
  * @上下滑动（|Y| > |X|)，终止计算
  * @左右滑动(|Y| < |X|)，终点X坐标 - 起点X坐标 > 0
  * > 0；（页面向右滑动，偏移距离增大。偏移距离 = offsetOld + |X|）
  * < 0；（页面向左滑动，偏移距离减小。偏移距离 = offsetOld - |X|）
  *
  */
  handleMove(e){ // 坐标变换，触摸变换触发页面左右滑动
    const { clientX, clientY } = e.touches[0]
    let { startX, startY, offsetOld } = this.data
    let _X = clientX - startX,
        _Y = clientY - startY
    if(Math.abs(_X) <= Math.abs(_Y)) return
    this.setData({ offset: offsetOld + _X })
  },
  /*
  * @触摸结束
  *
  * @上下滑动（|Y| > |X|)，终止计算
  * @左右滑动(|Y| < |X|)
  *
  * @快速滑动： 时间最长小于300ms，最短距离50触发滑动事件  T < 300 && |X| >= 50
  * @慢速滑动： T > 300 && |X| >= width/2
  * index = 0 终止右移(X > 0)，并复原move效果
  * index = last 终止左移(X < 0)，并复原move效果
  */
  handleEnd(e){ // 坐标变换终止
    const { timeStamp, target: { dataset: { index } } } = e // index 小圆点变换状态
    const { clientX, clientY } = e.changedTouches[0]
    let { list, startX, startY, startTime, width, offset, offsetOld } = this.data
    let T = timeStamp - startTime,
        _X = clientX - startX,
        _Y = clientY - startY,
        X = Math.abs(_X),
        Y = Math.abs(_Y)
    // if(X < Y) return
    if(X < Y || T < 300 && X < 50 || T >= 300 && X < Math.round(width/2) || index == 0 && _X > 0 || index == list.length - 1 &&  _X < 0) {
      this.setData({
        offset: offsetOld
      })
    }else {
      if(_X < 0) width = -width
        this.setData({
          offset: offsetOld + width,
          offsetOld: offsetOld + width,
        })
    }
  }
})

index.wxss

.page-swiper{
  width:100%;
  overflow-x:hidden;
}
.swiper-content{
  display:flex;
  min-height:100vh;
}
.swiper-content .content-slider{
  width:100vh;
  position: relative;
  top:0;
  left:0;
}
.swiper-content .content-slider:nth-child(odd){
  background-color:#f5f5f5;
}
.swiper-transform {
  transition: all 100ms ease;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -ms-perspective: 1000;
  perspective: 1000;
}

index.wxml

<view class="page-swiper" bind:touchstart="handleStart" bind:touchmove="handleMove" bind:touchend="handleEnd">
  <view class="swiper-content" style="width:{{width*list.length}}px">
    <view 
      class="content-slider {{startTime ? 'swiper-transform':''}}" 
      style="left: {{offset}}px" 
      wx:for-items="{{list}}" 
      wx:key="{{item}}" 
      data-index="{{index}}"
    >
    {{item.title}}
  </view>
  </view>
</view>

抽象为工具 swiper.js

function swiper(that) {
  that.handleStart = handleStart
  that.handleMove = handleMove
  that.handleEnd = handleEnd
}
/*
* @触摸起点
* @获取起点时间，起点坐标
*/
function handleStart(e){
  const { timeStamp } = e // 起点时间
  const { clientX, clientY } = e.touches[0] //起点坐标
  this.setData({ 
    startX: clientX,
    startY: clientY,
    startTime: timeStamp
  })
}
/*
* @触摸变换
* @坐标轴
* X -> 右， X轴自左向右自增
* Y -> 下， Y轴自上向下自增
*
* @上下滑动（|Y| > |X|)，终止计算
* @左右滑动(|Y| < |X|)，终点X坐标 - 起点X坐标 > 0
* > 0；（页面向右滑动，偏移距离增大。偏移距离 = offsetOld + |X|）
* < 0；（页面向左滑动，偏移距离减小。偏移距离 = offsetOld - |X|）
*
*/
function handleMove(e){ // 坐标变换，触摸变换触发页面左右滑动
  const { clientX, clientY } = e.touches[0]
  let { startX, startY, offsetOld } = this.data
  let _X = clientX - startX,
      _Y = clientY - startY
  if(Math.abs(_X) <= Math.abs(_Y)) return
  this.setData({ offset: offsetOld + _X })
}
/*
* @触摸结束
*
* @上下滑动（|Y| > |X|)，终止计算
* @左右滑动(|Y| < |X|)
*
* @快速滑动： 时间最长小于300ms，最短距离50触发滑动事件  T < 300 && |X| >= 50
* @慢速滑动： T > 300 && |X| >= width/2
* index = 0 终止右移(X > 0)，并复原move效果
* index = last 终止左移(X < 0)，并复原move效果
*/
function handleEnd(e){ // 坐标变换终止
  const { timeStamp, target: { dataset: { index } } } = e // index 小圆点变换状态
  const { clientX, clientY } = e.changedTouches[0]
  let { list, startX, startY, startTime, width, offset, offsetOld } = this.data
  let T = timeStamp - startTime,
      _X = clientX - startX,
      _Y = clientY - startY,
      X = Math.abs(_X),
      Y = Math.abs(_Y)
  if(X < Y || T < 300 && X < 50 || T >= 300 && X < Math.round(width/2) || index == 0 && _X > 0 || index == list.length - 1 &&  _X < 0) {
    this.setData({
      offset: offsetOld
    })
  }else {
    if(_X < 0) width = -width
      this.setData({
        offset: offsetOld + width,
        offsetOld: offsetOld + width,
      })
  }
}
module.exports = swiper

修改index.js

const swiper = require('~/util/swiper')
Page({
  data: {
    list: [
      {
        page: '',
        title: '展览展览'
      },
      {
        page: '',
        title: 'VIP专区VIP专区'
      },
      {
        page: '',
        title: '购票购票购票'
      },
      {
        page: '',
        title: '动态动态动态'
      }
    ],
    offsetOld: 0, // 保留距离状态 
    offset: 0, // 向左移动的距离 
    startX: 0, // X轴起点坐标
    startY: 0, // Y轴起点坐标
    startTime: 0, // 触摸起点时间
    width: 375 //默认屏幕宽度
  },
  /*
  * @获取设备宽度
  */
  onLoad() {
    const res = wx.getSystemInfoSync()
    this.setData({ width: res.windowWidth })
    swiper(this)
  }
})

转载于:https://my.oschina.net/igoryuyu/blog/1935405

chuohao3843
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS插件 ---- Swiper.js完整实例
05-26
Swiper.js完整实例，包括各种效果的demo以及引入jQuery否的各种js情况。
微信小程序swiper实现滑动放大缩小效果
10-17
主要介绍了微信小程序swiper实现滑动放大缩小效果,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Swiper Demo
newbxin的博客
09-05 272
【代码】Swiper Demo。
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
m0_63622279的博客
07-11 7792
scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-view组件添加一个限定的宽度。swiper 和 swiper-item组件是微信小程序提供的用于快速构建轮播图的组件，swiper为轮播图的容器，swiper-item为轮播图的每一项。官网地址【swiper组件】
wxml中的引用、wxss、view组件-flex布局、swiper组件、基础内容组件、表单组件、 操作反馈、媒体组件
weixin_40055163的博客
01-05 1499
1 wxml中的引用 1.编写item.wxml的代码如下： <view>我是item.wxml</view> <import src="c.wxml"/> <template name="item"> <text>我是item.wxml里的{{name}}</text> </template> 如图所示： 2.编写c.wxml的代码如下： <template name="c"> <tex
小程序 swiper轮播页(点击事件)
热门推荐
江苏小白龙
04-16 1万+
Swiper轮播页组件 属性 indicator-dots:是否现实面板知识点(小店) indicator-color:知识点颜色 Indicator-active-color:当前选中的指试点颜色 autoplay:是否自动播放 current:当前所在滑块的index Current-item-id:当前所在滑块的item-id不能与current同时制定 interval:自...
微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)
06-19
微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信小程序学习demo：视图控件View、ScrollView、Swiper(源代码+截图)微信...
微信小程序学习demo：视图控件View、ScrollView、Swiper.zip
01-25
在这个“微信小程序学习demo：视图控件View、ScrollView、Swiper.zip”中，我们将深入探讨微信小程序中的三个重要视图组件——View、ScrollView和Swiper，以及如何通过它们来构建用户界面。 首先，View是微信小程序...
微信小程序学习demo：视图控件View、ScrollView、Swiper.rar
01-25
在这个"微信小程序学习demo：视图控件View、ScrollView、Swiper.rar"压缩包中，包含了一系列关于微信小程序中三个重要视图组件的学习示例：View、ScrollView和Swiper。接下来，我们将深入探讨这三个组件的特点和用法...
小程序开发必备demo
07-01
"小程序开发必备demo"是针对开发者的一个资源集合，包含了一系列微信小程序的组件示例和实践案例，帮助开发者快速理解和上手小程序的开发。 在微信小程序的开发过程中，组件是非常关键的部分，它们类似于HTML中的...
微信小程序卡片左右滑动（有动画）
01-11
基本逻辑：左滑不通过，右滑通过。。。
微信小程序 仿美团分类菜单 swiper分类菜单
01-03
有同学要仿美团分类菜单.写了一个. 跟 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换很类似 代码: js就这么一点 //index.js //获取应用实例 var app = getApp() Page({ data: { currentTab: 0, grids: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], swiperList:[0, 1, 2, 3, 4] }, onLoad: function () { }, click: function (e) { console.log(e.currentTarget.dataset
微信小程序 轮播图swiper详解及实例（源码下载）
08-31
主要介绍了微信小程序 轮播图swiper详解及实例（源码下载）的相关资料,实用小技巧自定义轮播图swiper dots默认样式，需要的朋友可以参考下
写个swiper小demo
AmberWu
06-01 2364
swiper是开源、免费、强大的移动端触摸滑动事件。
swiper 多层嵌套
花神的博客
08-30 1万+
近期做了一个移动端的项目，需要使用到整屏滑动，刷新后需要停留在当前页面，第二个页面需要再次嵌套一个横向的滑动，发现网上这方面的例子少的可怜，于是自己利用swiper定制一个，下面是我制作的一个简单的demo，需要的朋友可以看一下。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta
Swiper插件的使用和介绍
m0_53850109的博客
01-26 4245
Swiper介绍 swiper是一款开源的解决前端开发中触摸滑动案例的插件 swiper官网：Swiper中文网-轮播图幻灯片js插件,H5页面前端开发https://www.swiper.com.cn/ swiper的使用 使用swiper首先要下载swiper 下载完成后在官网在线演示中找到你所需要的 这里我选择了基础演示中的010 首先在你下载的压缩包中找到010的demo文件 打开后点击鼠标右键打开网页源代码 ...
微信小程序：轮播图（swiper组件）
rating_的博客
07-14 504
轮播图（swiper组件） 在微信小程序中，可以使用滑块视图容器swiper组件来实现图片轮播的效果。 wxml代码： <!-- 轮播图 --> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}...
微信小程序swiper实现图片带描述标题翻页预览
samHuangLiang的博客
05-23 1859
效果： html: <view class='specialImglist'> <block wx:for="{{ projectObject.SalesHouse_AtlasAtlasList }}" wx:key="id"> <view class='imagesList' bindtap="onToPageSpeci...
微信小程序swiper滑动页面实践-类似于安卓ViewPager
邵磊的博客
05-02 1万+
一言不合，上效果 效果二 效果三 效果四
小程序 swiper高度自适应
最新发布
12-14
小程序中的 Swiper 是一款非常流行的滑动视图组件，它可以用于实现滑动导航、轮播图、滑块等效果。要实现 Swiper 高度自适应，可以通过以下方法： 1. 使用 flex 布局：在小程序中，可以使用 flex 布局来控制 Swiper...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值