小程序 左右切换控件封装

效果

新建 componets /navi目录 目录里右键新建Component 命名为index

用的pic  都是png格式

第一个命名

triangle.dis@left  第二个 triangle@left  其他不多讲

图片放到和navi目录同级别 新建images  放进去

index.js

// components/navi/navi.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: String,
    first: Boolean,
    latest: Boolean,
  },

  /**
   * 组件的初始数据
   */
  data: {
    disLeftSrc: 'images/triangle.dis@left.png',
    leftSrc: 'images/triangle@left.png',
    disRightSrc: 'images/triangle.dis@right.png',
    rightSrc: 'images/triangle@right.png'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onLeft: function(event) {
      if (!this.properties.latest) {
        this.triggerEvent('left', {}, {})
      }


    },
    onRight: function(event) {
      if (!this.properties.first) {
        this.triggerEvent('right', {}, {})
      }

    }

  }
})

两个事件 点击坐标和右边 抛出给用到的地方

wxml

<view class="container">

  <image bind:tap="onLeft" class="icon" src="{{latest?disLeftSrc:leftSrc}}" />
  <text class="title">{{title}}</text>
  <image bind:tap="onRight"  class="icon" src="{{first?disRightSrc:rightSrc}}" />
</view>

。简单的一笔

样式

/* components/navi/navi.wxss */
.icon{
  width: 80rpx;
  height: 80rpx;
}
.container{
  width: 600rpx;
  height: 80rpx;
  background-color: #f7f7f7;
  border-radius: 2px;
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.title{
  font-size: 28rpx;
}

这个控件好像没有啥特别注意的地方

使用 ：

先用json文件引入

{
  "usingComponents": {
    "v-navi": "/components/navi/index"
  }
}

wxml

<v-navi bind:left="onNext" bind:right="onPrevious" class="navi" title="{{classic.title}}" latest="{{latest}}" first="{{first}}" />

wxss

.navi{
  position: absolute;
  bottom: 40rpx;

}

js

/**
   * 页面的初始数据
   */
  data: {
    classic: null,
    latest: true,
    first: false,
    likeCount:0,
    likeStatus:false
  },

onNext: function (event) { 
    this._updateClassic('next');
  },
  onPrevious: function(event) {
    this._updateClassic('previous');
  },

 js就是通过网络请求 获取下来数据 然后设置上去 这些代码意义不大。。可以给你们瞅瞅

_updateClassic: function(nextOrPrevious) {
    const index = this.data.classic.index;
    classicModel.getClassic(index, nextOrPrevious,(res) => {
      this._getLikeStatus(res.id,res.type)
      this.setData({
        classic: res,
        latest: classicModel.isLatest(res.index),
        first: classicModel.isFirst(res.index),
      })
    })
  },

isFirst(index) {
    return index == 1
  }

  isLatest(index) {
    let latestIndex = this._getLatestIndex()
    return latestIndex == index
  }

_getLatestIndex() {
    let index = wx.getStorageSync('latest', index);
    return index;
  }