组件间的控制及当前期刊是否最新期刊的判断
组件间的控制
通过 navi 组件控制 classic 中期刊的切换,具体思路是:
(1)点击 navi 组件,并在 navi 组件中“上一期”、“下一期”的图标,绑定自定义事件 “left” 、“right” ;
<!--components/navi/navi.wxml-->
<view class="container">
<image class="icon" src="{{latest?disLeftSrc:leftSrc}}" bindtap='onLeft'></image>
<text class="title">{{title}}</text>
<image class="icon" src='{{first?disRightSrc:rightSrc}}' bindtap='onRight'></image>
</view>
// components/navi/navi.js
methods: {
onLeft: function() {
if(!this.properties.latest){
this.triggerEvent('left', {}, {})
}
},
onRight: function() {
if(!this.properties.first){
this.triggerEvent('right', {}, {})
}
}
}
(2)并在引入组件的时候,监听自定义事件;
<!--pages/classic/classic.wxml-->
<view class="container">
<view class="header">
<v-epsoide class="v-epsoide" index='{{classicData.index}}'></v-epsoide>
<v-like class="like" like='{{classicData.like_status}}' count='{{classicData.fav_nums}}' bind:like='onLike'></v-like>
</view>
<v-movie img='{{classicData.image}}' content='{{classicData.content}}'></v-movie>
<v-navi class="navi" title="{{classicData.title}}" latest='{{latest}}' first='{{first}}' bind:left='onNext' bind:right='onPrevious'></v-navi>
</view>
// pages/classic/classic.js
// 引入ClassicModel类,并实例化一个对象
import {
ClassicModel
} from '../../models/Classic.js';
import {
LikeModel
} from '../../models/Like.js';
let classicModel = new ClassicModel();
let likeModel = new LikeModel();
Page({
data: {
classicData: null,
latest: true,
first: false
},
onLike: function(event) {
console.log(event);
let like_or_cancel = event.detail.behavior;
likeModel.like(like_or_cancel, this.data.classicData.id, this.data.classicData.type);
},
onLoad: function(options) {
classicModel.getLatest((res) => {
console.log('classic页面数据为:', res);
this.setData({
classicData: res
})
});
},
// 点击进入上一期
onPrevious: function(e) {
console.log("onPrevious", e)
let index = this.data.classicData.index;
classicModel.getPrevious(index, (res) => {
this.setData({
classicData: res
})
})
},
// 点击进入上一期
onNext: function() {
}
})
特别提醒: getPrevious 是 Classic.js 这个类的其中一个方法。
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/115124.html