首页

技术点

swiper 图片相似的背景色

轮播

轮播组件使用小程序 swiper (opens new window) 标签实现，特别处在于图片变更时，背景颜色也会跟随变更。 实现原理是轮播图变更时，会触发 bindchange 事件，该方法会返回当前滚动图片的索引值。 根据返回的索引，设置对应的背景色。该背景色为当前图片的平均色调，由七牛云存储提供的方法获取。

主要代码

轮播实例

// 实例化轮播插件
swiperChangeHandle(e) {
  const index = e.detail.current
  const bgcolor = this.data.swiper[index].bgcolor

  this.setData({
    swiperIndex: index
  })

  this.triggerEvent('onchange', {
    index,
    bgcolor
  })
}

变更背景色

// 根据轮播变换背景色
swiperChange(e) {
  this.setData({
    bgcolor: e.detail.bgcolor
  })
},

头部

头部组件主要使用滚动事件监听，变更头部背景色

卡片式内容

主要使用 m-panel 组件，其 scroll-x 属性控制是否开启横向滚动