小程序开发-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写入缓存中