微信小程序 wepy wx.previewImage 封装

imagebrowse.wpy

<style lang="less">
  .clear {
    clear: both;
  }
</style>
<template>
  <view>
    <block wx:for="{{imagelistbrowse}}" wx:for-item="image" wx:key="index">
      <image
        src="{{image}}"
        data-src="{{image}}"
        @tap="previewImage"
        class="{{imageclass}}">
      </image>
    </block>
    <view class="clear"></view>
  </view>
</template>
<script>
  /* eslint-disable comma-dangle */
  import wepy from 'wepy'
  export default class imagebrowse extends wepy.component {
    props = {
      imagelistbrowse: {
//        coerce: function (v) {
//          console.log('vvvvvvv    ' + v)
//          return v ? [].concat(v) : []
//        },
        type: Array,
        default: [],
//        twoWay: true
      },
      imageclass: ''
    }
    data = {}
    events = {}
    methods = {
      previewImage (e) {
        console.log(e)
        let current = e.target.dataset.src
        wx.previewImage({
          current: current, // 当前显示图片的http链接
          urls: this.imagelistbrowse // 需要预览的图片http链接列表
        })
      }
    }
    onLoad () {
      console.log('onLoad   ' + JSON.stringify(this.imagelistbrowse))
    }
    onShow () {
      console.log('onShow   ' + JSON.stringify(this.imagelistbrowse))
    }
  }
</script>

使用：

<style lang="less">
  @import "../style/mixin";
  .user-img {
    .wh(75px, 75px);
    border-radius: 50%;
    border: 5px solid rgba(215, 215, 215, 0.8);
    margin-top: 20px;
  }
</style>
<template>
    <repeat>
      <imagebrowse
        :imageclass="'user-img'"
        :imagelistbrowse.sync="userPhoto">
      </imagebrowse>
    </repeat>  
</template>
<script>
  import wepy from 'wepy'
  import ImageBrowse from '../components/imagebrowse'
  export default class homelist extends wepy.page {
    ...
    components = {
      imagebrowse: ImageBrowse,
    }
    data = {
      userPhoto: [], // 注意这边，因为是为了显示列表，所以是list
      }
    computed = {}
    methods = {
    }
    events = {}
    onLoad () {
    }
    onShow () {
      this.$parent.getUserInfo(u => {
        this.userInfo = u
        this.userPhoto = u.avatarUrl ? [].concat(u.avatarUrl) : []
        this.$apply()
      })
    };
  }
</script>

刚学Vue 和 wepy 所以组件传值踩了点坑