组件间的控制及当前期刊是否最新期刊的判断

组件间的控制

通过 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 这个类的其中一个方法。