先看下效果图吧, 不得不说 微信小程序的设计真的很好! 用户体验也很好~
image.png
image.png
拍照和上传照片 官网讲的很详细
image.png
具体用法也很简单 js 部分代码
- selectBottom() {
- const selectNum = this.data.selectImageList.length;
- const num = 3 - selectNum;
- num != 0 && wx.chooseImage({
- count: num,
- success: (res) => {
- // 返回选定照片的本地文件路径列表, tempFilePath 可以作为 img 标签的 src 属性显示图片
- let tempFilePaths = res.tempFilePaths;
- let newList = this.data.selectImageList;
- for (let i = 0; i <tempFilePaths.length; i++) {
- newList.push(tempFilePaths[i]);
- }
- newList.length == 3 ? this.setData({
- isShow: false
- }) :null;
- this.setData({
- selectImageList: newList
- }, () => {
- console.log(this.data.selectImageList)
- })
- // console.log("tempFilePaths:"+JSON.stringify(tempFilePaths))
- }
- })
- },
- closeOption(e) {
- const {
- index
- } = e.currentTarget.dataset;
- let imagelist = this.data.selectImageList;
- imagelist.splice(index, 1);
- this.setData({
- selectImageList: imagelist,
- isShow:true
- })
- console.log(JSON.stringify(e))
- },
vxml 相关代码
- <view class='image-list-view'>
- <view wx:if="{{isShow}}" class='line-x' bindtap='selectBottom' hover-class='white-active'>
- <icon class='icontfont icon-img'></icon>
- <text class="icontfont sml"> 上传凭证 </text>
- </view>
- <block wx:for="{{selectImageList}}" wx:key="{{index}}">
- <view class='image-posit'>
- <image src="{{item}}" class='image-list'/>
- <icon class="icontfont i-smal icon-form-close" data-index="{{index}}" bindtap='closeOption'></icon>
- </view>
- </block>
- </view>
预览的话也简单 看下官方介绍
image.png
- previewImage(e) {
- const { url, imagelist } = e.currentTarget.dataset;
- wx.previewImage({
- urls: imagelist, // 预览的图片 url 数组
- current: url, // 当前的 url
- })
- },
- <image wx:for="{{item.imageList}}" wx:for-item="i" src="{{i}}" class="anser-iamge-items" bindtap='previewImage' data-url="{{i}}" data-imagelist="{{item.imageList}}"/>
来源: http://www.jianshu.com/p/cbb294ee21a7