258资源分享网

imagebrowse.wpy

<style lang="less">

.clear {

clear: both;

}

</style>

<template>

<view>

<block wx:for="{{imagelistbrowse}}" wx:for-item="image" wx:key="index">

<image

src=http://www.yiyongtong.com/archives/"{{image}}"

data-src=http://www.yiyongtong.com/archives/"{{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()

})

};