微信小程序缓存滑动距离,当页面浏览到一定位置,滑动其他页面后返回该页面记录之前的滑动距离
15.微信小程序缓存滑动距离
我们在浏览页面的时候,然后左滑或者右滑到新的页面,等返回此页面,我们希望可以记录上次滑动的距离
虽然这个实现起来并不难,但是会遇到一些坑,因为scroll-view的组件里面有个bindscroll滚动事件,我们纵向滚动页面,可以通过e.detail.scrollTop记录滑动的距离,但是当我们横向滚动时,还会出现一个问题,这个bindscroll事件还会执行一次,记录我们滑动当前的页面距离,通过测试发现,最后横向滑动的时候,他的scrollTop 是0,所以我们设置缓存时需要判断如果scrollTop不等于0的时候,我们才要设置缓存
- index.wxml
<swiper bindchange="change" current-item-id="{{docid}}" duration="100">
<scroll-view scroll-top="{{top}}" bindscroll="scroll"></scroll-view>
</swriper>
- index.js 设置缓存
//scroll-view 滚动事件
scroll: function (e) {
// 因为scroll当横向滑动另一个页面时,他也会多滑动一次,而最后一次就是0
if (e.detail.scrollTop != 0) {
//设置缓存
wx.setStorage({
key: 'key',
// 缓存滑动的距离,和当前页面的id
data: [e.detail.scrollTop, e.target.dataset.id]
})
}
}
- index.js 获取缓存
在swiper的bindchange事件中获取
change: function (e) {
var docid = e.detail.currentItemId;
this.setData({ docid: docid })
// 获取缓存距离
wx.getStorage({
key: 'key',
success: function (res) {
// 判断如果返回刚才滑动的页面,才获取缓存
if (res.data[1] == docid) {
that.setData({ top: res.data[0] });
}
}
})
}
微信小程序缓存滑动距离,当页面浏览到一定位置,滑动其他页面后返回该页面记录之前的滑动距离的更多相关文章
- 微信小程序--缓存,支持过期时间的二次开发封装
简介 微信小程序提供了缓存的api,包括同步和异步两种,具体api不多说明,可自行查看官方文档 现在微信小程序缓存api存在一个问题就是没有设定过期时间,下面给大家介绍一下对小程序缓存的二次封装,使其 ...
- 微信小程序 --- 缓存数据
保存数据 / 读取数据 / 删除数据 / 数据异步操作 每一个微信小程序都可以有自己的本地缓存,可以通过wx.setStorage( wx.setStorageSync) ,wx.getS ...
- 微信小程序 缓存说明
每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearSt ...
- 微信小程序相关二、css介绍,菜单制作,表单相关,京东注册页面
一.第二天上午 1.1上午因为有其他的课所以没有去这个课,不过下午看复习的时候的概括,讲了DTD,语法特性,css选择器以及权重,还有一些简单的样式 1.2 DTD Docuement Type 声明 ...
- 微信小程序缓存
购物车数据加入缓存,相同的商品值修改数量,然后再次加入缓存中 修改购物车的数据的时候同理,都是修改缓存数据然后加入到缓存中. 具体的使用方法看官方文档,我只是提供思路
- 微信小程序:设置启动页面
一.功能描述 微信小程序启动时,首先运行app.js,然后才跳转到第一个页面,也就是启动界面. 设置启动界面,只需要调整app.json的pages信息的位置,放在第一条的page记录便是启动界面
- 微信小程序踩坑集合
1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...
- 转载:第五弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!
博卡君今天继续更新,忙了一天,终于有时间开工写教程.不罗嗦了,今天我们来看看如何实现一些前端的功能和效果. 第八章:微信小程序分组开发与左滑功能实现 先来看看今天的整体思路: 进入分组管理页面--&g ...
- 两百条微信小程序跳坑指南(不定时更新)
微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...
随机推荐
- juery下拉刷新,div加载更多元素并添加点击事件(二)
buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...
- 调用HTMLTestRunner生产的报告内容为空解决办法
开始代码如下,生成报告内容为空: #coding=utf-8 import unittest,time,reimport requestsimport jsonimport HTMLTestRunne ...
- Vim的分屏功能
本篇文章主要教你如何使用 Vim 分屏功能. 分屏启动Vim 使用大写的O参数来垂直分屏. vim -On file1 file2 ... 使用小写的o参数来水平分屏. vim -on file1 f ...
- BootStarp的form表单的基本写法
代码如下: <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> < ...
- 手游研发CJ抱大腿指南
文摘要:CJ来了,又是一年一度的游戏圈盛事,随着手游行业的迅速崛起,今年CJ上,手游研发商以及发行商必定成为焦点.由于门槛低.市场热.前景好等因素的影响,国内一下子蹦出一大堆手游研发团队.很幸运(或者 ...
- Django 中form的用法
form的主要作用:1.在html中生成表单框架,2.验证数据(实话实说,很简洁,但不实用,灵活性差) from django.db import models # Create your model ...
- 动态引入js
function loadScript(url, callback){ var script = document.createElement("script") ...
- 洛谷P1291 [SHOI2002]百事世界杯之旅 [数学期望]
题目传送门 百事世界杯之旅 题目描述 “……在2002年6月之前购买的百事任何饮料的瓶盖上都会有一个百事球星的名字.只要凑齐所有百事球星的名字,就可参加百事世界杯之旅的抽奖活动,获得球星背包,随声听, ...
- 在phpWeChat里生成一个临时二维码(非微信二维码)
phpWeChat作为支持Pc+H5开发的管理系统,内置一套二维码生成API,访问地址: 您的域名/api/qrcode/index.php?data=二维码数据 以下为使用示例 使用时有一点需要注意 ...
- Xamarin 2017.9.13发布更新
Xamarin 2017.9.13发布更新 Visual Studio 2017更新到15.3.4.其中,Xamarin.Visual更新到4.6.3.4;Xamarin.iOS更新到10.12.3 ...