# 学习日志
今天上午通过最后的答辩,我们学会了很多新的知识,以及明白了自身的不足,其中最让我印象深刻的是异步缓存,和滑动列表锚点。
# 异步缓存
微信小程序的缓存
关于本地缓存
1.wx.setStorage(wx.setStorageSync)、wx.getStorage(wx.getStorageSync)、wx.clearStorage(wx.clearStorageSync)
可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB
2.localStorage 是永久存储
一、异步缓存
wx.setStorage(OBJECT)
将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容
wx.setStorage({
key:"key",
data:"value"
})
wx.getStorage(OBJECT)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
从本地缓存中异步获取指定 key 对应的内容。
wx.getStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
wx.getStorageInfo(OBJECT)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
异步获取当前storage的相关信息
wx.getStorageInfo({
success: function(res) {
console.log(res.keys)
console.log(res.currentSize)
console.log(res.limitSize)
}
})
wx.removeStorage(OBJECT)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
从本地缓存中异步移除指定 key 。
wx.removeStorage({
key: 'key',
success: function(res) {
console.log(res.data)
}
})
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 列表滑动锚点
因为在微信小程序的环境中不能想在浏览器里设置标签,或者操作dom滚动,传统做法就行不通了,一切都得按小程序的文档来。、
使用boundingClientRect()方法获取每个锚点的坐标,然后再用wx.pageScrollTo()方法滑动过去。结果发现效果不是很好,因为boundingClientRect方法返回的每个点的坐标会随着屏幕滑动而变化,可能还会引起页面抖动,选择scroll-view(可滚动视图区域) 组件来实现锚点效果。
- scroll-into-view:这个绑定了一个属性,它的值应该是页面元素的id,设置它的值就可以跳转到ID对应的元素那里了。
- scroll-y:添加这个属性标明是竖向滑动的,对应的scroll-x则表示横向滑动,竖向滑动时scroll-view必须设置一个固定的height
- bindscroll:监听滑动,传给他一个事件,滑动时执行该事件 文档上给的属性特别多,暂时只需要上述几个就可实现我们想要的效果。实现原理也很简单,内容部分,每个英文简写的view设置一个 id,然后在导航list那里点击时,就把scroll-into-view的值设置成点击的那个id即可实现跳转。 再说一下scroll-view的高度问题,这个一定要做适配的固定高度,不然在不同屏幕大小的手机上的显示效果有差异。
<!--pages/scrollnav/scrollnav.wxml-->
<!--导航滚动 -->
<scroll-view class="tui-city-scroll" scroll-x="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true">
<text bindtap="getStatus" id="NAV{{index}}" class="tui-nav-li {{index === status ? 'tui-nav-active' : ''}}" data-index="{{index}}" wx:for="{{navList}}" wx:key="">{{item}}</text>
</scroll-view>
1
2
3
4
5
2
3
4
5
<!--列表滚动区 -->
<view class="tui-fixed-y">
<scroll-view class="tui-city-scroll-y" scroll-y="true" scroll-into-view="NAV{{status}}" scroll-with-animation="true">
<view wx:for="{{navList}}" wx:key="">
<view id="NAV{{index}}" class="tui-list-head">{{item}}</view>
<view class="tui-list-li">{{item}} 列表 {{index}}</view>
</view>
</scroll-view>
</view>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 收获心得
通过第九天的答辩,在上午,我们进行了最后的答辩,在这个过程中我们学到了很多东西,包括怎么解释自己做的功能。在其他组的展示过程中,我了解到了异步缓存和锚点滑动。最后,明白了要懂得虚心向别人请教的道理。