258资源分享网

本例从微信小程序的组件扒下来的。

WXML:

<view class="weui-cell"> <view class="weui-cell__bd"> <view class="weui-uploader"> <view class="weui-uploader__hd"> <view class="weui-uploader__title">点击可预览选好的图片</view> <view class="weui-uploader__info">{{imageList.length}}/{{count[countIndex]}}</view> </view> <view class="weui-uploader__bd"> <view class="weui-uploader__files"> <block wx:for="{{imageList}}" wx:for-item="image"> <view class="weui-uploader__file"> <image class="weui-uploader__img" src=http://www.yiyongtong.com/archives/"{{image}}" data-src=http://www.yiyongtong.com/archives/"{{image}}" bindtap="previewImage"></image> </view> </block> </view> <view class="weui-uploader__input-box"> <view class="weui-uploader__input" bindtap="chooseImage"></view> </view> </view> </view> </view> </view>

WXSS:

page { line-height: 1.6; font-family: -apple-system-font, "Helvetica Neue", sans-serif; } icon { vertical-align: middle; } .weui-cell { padding: 10px 15px; position: relative; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; } .weui-cell_input { padding-top: 0; padding-bottom: 0; } .weui-uploader__hd { display: -webkit-box; display: -webkit-flex; display: flex; padding-bottom: 10px; align-items: center; } .weui-uploader__title { flex: 1; } .weui-uploader__info { color: #b2b2b2; } .weui-uploader__bd { margin-bottom: -4px; margin-right: -9px; overflow: hidden; } .weui-uploader__file { float: left; margin-right: 9px; margin-bottom: 9px; } .weui-uploader__img { display: block; width: 79px; height: 79px; } .weui-uploader__input-box { float: left; position: relative; margin-right: 9px; margin-bottom: 9px; width: 77px; height: 77px; border: 1px solid #d9d9d9; } .weui-uploader__input-box:before, .weui-uploader__input-box:after { content: " "; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #d9d9d9; } .weui-uploader__input-box:before { width: 2px; height: 39.5px; } .weui-uploader__input-box:after { width: 39.5px; height: 2px; } .weui-uploader__input { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }

JS

Page({ data: { imageList: [], countIndex: 3,//最多上传图片的数量 count: [1, 2, 3, 4, 5, 6, 7, 8, 9] }, chooseImage: function () { var that = this; wx.chooseImage({ count: this.data.count[this.data.countIndex], success: function (res) { console.log(res) that.setData({ imageList: res.tempFilePaths }) } }) }, previewImage: function (e) { var current = e.target.dataset.src wx.previewImage({ current: current, urls: this.data.imageList }) } })