data: {
avatarUrl:null
},
bindViewTap:function(){
var that = this;
wx.chooseImage({
// 设置最多可以选择的图片张数,默认9,如果我们设置了多张,那么接收时//就不在是单个变量了,
count: 1,
sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: function(res){
// 获取成功,将获取到的地址赋值给临时变量
var tempFilePaths = res.tempFilePaths;
that.setData({
//将临时变量赋值给已经在data中定义好的变量
avatarUrl:tempFilePaths
})
},
fail: function(res) {
// fail
},
complete: function(res) {
// complete
}
})
}
//点击此按钮调用选择图片的方法,成功后将图片显示在image标签上
<button bindtap="bindViewTap" type="submit">绑定事件</button>
<image src="{{avatarUrl}}"></image>
<image wx:for="{{avatarUrl}}" wx:key="unique" src="{{item}}"></image>
data:{
avatarUrl:null,
pictures: [ 'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg',
'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg',
'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg',
'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg',
'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg',
'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg',
'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg',
'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg'
]
},
previewImage: function(e){
var that = this,
//获取当前图片的下表
index = e.currentTarget.dataset.index,
//数据源
pictures = this.data.pictures;
wx.previewImage({
//当前显示下表
current: pictures[index],
//数据源
urls: pictures
})
}
<view>
<image wx:for="{{pictures}}" wx:key="unique"src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image>
</view>
<!--图片描述-->
<view wx:if="{{item.pictures}}" class="list-dImg">
<image bindtap="imgYu" data-list="{{item.pictures}}" data-src="{{dImg}}" wx:for="{{item.pictures}}" wx:for-item="dImg" src="{{dImg}}"></image>
</view>
//图片点击事件
imgYu:function(event){
var src = event.currentTarget.dataset.src;//获取data-src
var imgList = event.currentTarget.dataset.list;//获取data-list
//图片预览
wx.previewImage({
current: src, // 当前显示图片的http链接
urls: imgList // 需要预览的图片http链接列表
})
}
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有