小程序开发-9-Behavior行为与加入缓存系统优化流行页面
Behavior行为与加入缓存系统优化流行页面
navi组件与移动端触碰区域探讨
触碰区域优化
- 设计师切图切大点,多余部分变成透明色
- 前端将可触碰区域变大
解决向左箭头变灰,向右变灰
禁用事件的技巧
产生一个向左的事件,但是在nav组件里面忽略
组件自身判断是否是第一期,自身禁用向左的按钮
music组件初步实现
完成页面布局
初识组件的Behavior行为
创建组件共同行为,行为与组件的定义很相似
let behaviro = Behaviro({ properties:{ img: String, conent:String } }); export {behaviro};
三个组件都引用behavior
import {behaviro} from '../classic-beh.js' Component({ behaviors:[classicBeh], data:{}, method:{}, ... })
behavior继承与多继承的覆盖原则
同名变量覆盖的问题
- 子类覆盖父类,即组件里面的属性值会覆盖behavior里面的属性值
- 数组越靠后的behavior会覆盖靠前的behavior
behaviors:[b1,b2,b3] //即b3会覆盖b2,b2会覆盖b1
注意:生命周期函数不会发生覆盖,即先执行behaviors里面的周期,后执行组件里面的周期
实现最新期刊和第一期期刊的判断逻辑
在classic model中实现第一期期刊的判断逻辑
//是否是第一期 isFirst(index){ return index === 1? true:false; }
实现最新期刊的判断逻辑
- 获取最新期刊的index,并存入缓存中
//获取最新一期期刊 getLatest(cb){ this.request({ url:'classic/latest', success: (res)=>{ cb(res); this._setLatestIndex(res.index); } }) } //将数据存入缓存中 _setLatestIndex(index){ wx.setStorageSync('latest',index); } //从缓存中读取数据 _getLatestIndex(){ return wx.getStrageSync('latest'); }
//是否最新期刊数据 isLatest(index){ let latestIndex = this._getLatestIndex(); return latestIndex === index?true:false; }
实现期刊切换
wxml 里面的代码
<wzh-nav class="nav" title="{{classic.title}}" first="{{first}}" latest="{{latest}}" bind:left="onNext" bind:right="onPrevious"/>
js里面的代码
onNext(){ this._updateClassic('next'); } onPrevious(){ this._updateClassic('previous'); } _updateClassic(previousOrNext){ let index = this.data.classic.index; classicModel.getClassic(index,previousOrNext,(res)=>{ this.setData({ classic: res, latest: classicModel.isLatest(res.index); first: classicModel.isFirst(res.index); }); }); }
classicModel里面的代码
//获得上或下一期数据 getClassic(index,previousOrNext,cb){ this.request({ url: `/classic/${index}/${previousOrNext}`, success: (res) => { cb(res) } }) }
加入缓存提升用户体验
思路:先从缓存中寻找或者API写入缓存中