微信小程序（八）实战——加载图片images
1.加载本地图片本地路径：/pages/images/1.png
.widget_arrow{
width:25px;
height:25px;
}2.加载网络图片网络图片地址：http://img1.3lian.com/2015/w7/85/d/101.jpg
.widget_arrow2{
width:155px;
height:155px;
}结果：
3.点击选择-加载图片3-1：我们定义的全局变量,也就是data中的url,已经有值了,现在只需要在页面中显示即可。//点击此按钮调用选择图片的方法,成功后将图片显示在image标签上
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
}
})
},3-3：点击后选择，再显示1
2
4.加载多张图片4-1：首先在data中定义好数据源:
data: {
avatarUrl: null,
pictures:
['/pages/images/1.png',
'/pages/images/2.png',
'/pages/images/3.png',
]
},4-2：然后创建方法previewImage,实现图片预览:
previewImage: function (e) {
var that = this,
//获取当前图片的下表
index = e.currentTarget.dataset.index,
//数据源
pictures = this.data.pictures;
wx.previewImage({
//当前显示下表
current: pictures[index],
//数据源
urls: pictures
})
},4-3：然后再页面中边遍历数据,显示:
4-4：可以在wxss中设置样式
.widget_arrow3{
width:55px;
height:55px;
}