15.微信小程序缓存滑动距离

我们在浏览页面的时候,然后左滑或者右滑到新的页面,等返回此页面,我们希望可以记录上次滑动的距离

虽然这个实现起来并不难,但是会遇到一些坑,因为scroll-view的组件里面有个bindscroll滚动事件,我们纵向滚动页面,可以通过e.detail.scrollTop记录滑动的距离,但是当我们横向滚动时,还会出现一个问题,这个bindscroll事件还会执行一次,记录我们滑动当前的页面距离,通过测试发现,最后横向滑动的时候,他的scrollTop 是0,所以我们设置缓存时需要判断如果scrollTop不等于0的时候,我们才要设置缓存

  • index.wxml
  1. <swiper bindchange="change" current-item-id="{{docid}}" duration="100">
  2. <scroll-view scroll-top="{{top}}" bindscroll="scroll"></scroll-view>
  3. </swriper>
  • index.js 设置缓存
  1. //scroll-view 滚动事件
  2. scroll: function (e) {
  3. // 因为scroll当横向滑动另一个页面时,他也会多滑动一次,而最后一次就是0
  4. if (e.detail.scrollTop != 0) {
  5. //设置缓存
  6. wx.setStorage({
  7. key: 'key',
  8. // 缓存滑动的距离,和当前页面的id
  9. data: [e.detail.scrollTop, e.target.dataset.id]
  10. })
  11. }
  12. }
  • index.js 获取缓存
  1. swiperbindchange事件中获取
  2. change: function (e) {
  3. var docid = e.detail.currentItemId;
  4. this.setData({ docid: docid })
  5. // 获取缓存距离
  6. wx.getStorage({
  7. key: 'key',
  8. success: function (res) {
  9. // 判断如果返回刚才滑动的页面,才获取缓存
  10. if (res.data[1] == docid) {
  11. that.setData({ top: res.data[0] });
  12. }
  13. }
  14. })
  15. }

微信小程序缓存滑动距离,当页面浏览到一定位置,滑动其他页面后返回该页面记录之前的滑动距离的更多相关文章

  1. 微信小程序--缓存,支持过期时间的二次开发封装

    简介 微信小程序提供了缓存的api,包括同步和异步两种,具体api不多说明,可自行查看官方文档 现在微信小程序缓存api存在一个问题就是没有设定过期时间,下面给大家介绍一下对小程序缓存的二次封装,使其 ...

  2. 微信小程序 --- 缓存数据

    保存数据  /  读取数据  /  删除数据  /  数据异步操作 每一个微信小程序都可以有自己的本地缓存,可以通过wx.setStorage( wx.setStorageSync) ,wx.getS ...

  3. 微信小程序 缓存说明

    每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearSt ...

  4. 微信小程序相关二、css介绍,菜单制作,表单相关,京东注册页面

    一.第二天上午 1.1上午因为有其他的课所以没有去这个课,不过下午看复习的时候的概括,讲了DTD,语法特性,css选择器以及权重,还有一些简单的样式 1.2 DTD Docuement Type 声明 ...

  5. 微信小程序缓存

    购物车数据加入缓存,相同的商品值修改数量,然后再次加入缓存中 修改购物车的数据的时候同理,都是修改缓存数据然后加入到缓存中. 具体的使用方法看官方文档,我只是提供思路

  6. 微信小程序:设置启动页面

    一.功能描述 微信小程序启动时,首先运行app.js,然后才跳转到第一个页面,也就是启动界面. 设置启动界面,只需要调整app.json的pages信息的位置,放在第一条的page记录便是启动界面

  7. 微信小程序踩坑集合

    1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debu ...

  8. 转载:第五弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

    博卡君今天继续更新,忙了一天,终于有时间开工写教程.不罗嗦了,今天我们来看看如何实现一些前端的功能和效果. 第八章:微信小程序分组开发与左滑功能实现 先来看看今天的整体思路: 进入分组管理页面--&g ...

  9. 两百条微信小程序跳坑指南(不定时更新)

    微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳 ...

随机推荐

  1. juery下拉刷新,div加载更多元素并添加点击事件(二)

    buffer.append("<div class='col-xs-3 "+companyId+"' style='padding-left: 10px; padd ...

  2. 调用HTMLTestRunner生产的报告内容为空解决办法

    开始代码如下,生成报告内容为空: #coding=utf-8 import unittest,time,reimport requestsimport jsonimport HTMLTestRunne ...

  3. Vim的分屏功能

    本篇文章主要教你如何使用 Vim 分屏功能. 分屏启动Vim 使用大写的O参数来垂直分屏. vim -On file1 file2 ... 使用小写的o参数来水平分屏. vim -on file1 f ...

  4. BootStarp的form表单的基本写法

    代码如下: <!DOCTYPE html> <html> <head> <title>BootStrap的基础入门</title> < ...

  5. 手游研发CJ抱大腿指南

    文摘要:CJ来了,又是一年一度的游戏圈盛事,随着手游行业的迅速崛起,今年CJ上,手游研发商以及发行商必定成为焦点.由于门槛低.市场热.前景好等因素的影响,国内一下子蹦出一大堆手游研发团队.很幸运(或者 ...

  6. Django 中form的用法

    form的主要作用:1.在html中生成表单框架,2.验证数据(实话实说,很简洁,但不实用,灵活性差) from django.db import models # Create your model ...

  7. 动态引入js

    function loadScript(url, callback){      var script = document.createElement("script")     ...

  8. 洛谷P1291 [SHOI2002]百事世界杯之旅 [数学期望]

    题目传送门 百事世界杯之旅 题目描述 “……在2002年6月之前购买的百事任何饮料的瓶盖上都会有一个百事球星的名字.只要凑齐所有百事球星的名字,就可参加百事世界杯之旅的抽奖活动,获得球星背包,随声听, ...

  9. 在phpWeChat里生成一个临时二维码(非微信二维码)

    phpWeChat作为支持Pc+H5开发的管理系统,内置一套二维码生成API,访问地址: 您的域名/api/qrcode/index.php?data=二维码数据 以下为使用示例 使用时有一点需要注意 ...

  10. 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 ...