您好!
欢迎来到京东云开发者社区
登录
首页
博文
课程
大赛
工具
用户中心
开源
首页
博文
课程
大赛
工具
开源
更多
用户中心
开发者社区
>
博文
>
小程序swiper下拉判断是否拉到底部
分享
打开微信扫码分享
点击前往QQ分享
点击前往微博分享
点击复制链接
小程序swiper下拉判断是否拉到底部
京东ZERO团队
2021-01-07
IP归属:未知
27320浏览
Js
### 前言 swiper没有这个功能:小程序竖向swiper滚动到底部,再往下拉判断到底的功能。 本妹子为了完成“下拉到底就弹框”的业务,想了下面的办法,给小伙伴们分享下。 ### 实现 给`swiper`添加`transition`,`swiper-item` 的位置发生改变时会触发 transition 事件,并获得`x、y`轴改变的指,`event.detail = {dx: dx, dy: dy}`。然后将改变值存入数组中,当改变值为`0`,而且数组的最后一位数有值时,则判断到底了。 wxml: ```html <swiper bind:transition="_transition"> <block wx:for="{{list}}" wx:for-item="item" wx:for-index="idx" wx:key="activityId"> <swiper-item"> <view>test</view> </swiper-item> </block> </swiper> ``` js: ```javascript //存储y轴改变值 this.dyAry=[]; //eventhandle swiper-item 的位置发生改变时会触发 _transition(e) { if (this.lastData) { let dy = e.detail.dy; //如果到底部还继续往下拉,这弹出提示框 if (dy == 0 && this.dyAry[this.dyAry.length - 1] > 0) { this.dyAry = []; wx.toast('swpier都看完啦') } this.dyAry.push(dy) } } ``` Happy coding .. :) ### 相关链接 [https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)
原创文章,需联系作者,授权转载
上一篇:Git message规范Change log编写指南
下一篇:请收下超萌的web装饰 卡通看板娘
相关文章
【技术干货】企业级扫描平台EOS-Jenkins集群进阶之路
Typescript合成Webpack中
不为熟知的ES5 api(一)
京东ZERO团队
文章数
39
阅读量
91750
作者其他文章
01
webpack打包组件配置(React版本)
这篇文章是以打包react插件的形式,介绍webpack的一些配置信息。如果写简单插件的话还是推荐使用rollup,但是可以用写插件的形式去学习一下webpack的一些东西。(适用于初中级webpack学者)
01
webpack核心概念与基本实现
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。**
01
Typescript合成Webpack中
TypeScript是JavaScript类型的超集,它可以编译成纯JavaScript,简称ts。相对于ES6,TypeScript最大的改善是增加了类型系统,国内外很多大型工程都用它,如AngularJs,白鹭引擎、Antd。
01
小程序加载svg图片
小程序的[组件](https://developers.weixin.qq.com/miniprogram/dev/component/)中是没有支持`SVG`标签的。 但是在前端小伙伴的实际开发中,UED经常提供SVG图片过来,如果不想用引入`iconfont`的话,那么妹子我将介绍个很好用的方法。
最新回复
丨
点赞排行
共0条评论
京东ZERO团队
文章数
39
阅读量
91750
作者其他文章
01
webpack打包组件配置(React版本)
01
webpack核心概念与基本实现
01
Typescript合成Webpack中
01
小程序加载svg图片
添加企业微信
获取1V1专业服务
扫码关注
京东云开发者公众号