微信小程序实战开发二：微信小程序 WEUL组件之 画廊组件
微信小程序实战开发二：微信小程序 WEUL组件之 画廊组件
微信小程序 WEUL组件之 画廊组件
官方地址：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/gallery.html
组件介绍：用于多张图片展示，类似原生的wx.previewImage的展示。
阅读理解：这个其实就是可以将一组图片全屏放大显示的一个组件，通常可以用在产品多图展示点击看大图，内容中的图片展示，点击看大图。有了这个组件我们就可以省做大图效果的过程了。虽然做大图效果也不麻烦，不过有现成的组件可以用，还是用组件更好一些。
看一下参数说明：
这些个参数里面我个人觉得最值得一提的只有 showDelete这个参数。
原因如下：一组图片放大之后，在我们一般的使用场景中 删除这个按纽是没什么用的。我们更喜欢有个 关闭 按纽。但官方只给了删除按纽没办法，把它隐藏掉就好了。
隐藏的方法是 在组件调用的时候 加上
showDelete="{{false}}"
请注意格式，一定要这么写。。否则隐藏不掉。。。我们可以把 删除 这个功能隐藏掉自已再加一个关闭就好了。
具体代码如下：
先在 JSON文件中引用画廊这个组件
{
"usingComponents": {
"mp-gallery": "weui-miniprogram/gallery/gallery"
}
}WXML中调用：为了使应用场景更贴合我们平常的使用方式，我们先通过数组把图片循环展示出来，然后在图片的列表上面绑定点击事件 imgList，并把图片的索引通过itemid的方式传到JS里面。
这里需要注意一点，我们在画廊组件下面加了一个 view 用来显示关闭按纽，它根据画廊是否显示的值，来控制自已的CSS，让关闭按纽同画廊同步打开或者关闭。这样我们就实现了给画廊加一个关闭按纽的过程 。
<view class="page">
<view class="page__hd">
<view class="page__title">Gallery</view>
<view class="page__desc">画廊，类似原生的wx.previewImage的展示。点击开启展示</view>
</view>
<view bindtap="imgList" wx:for="{{imgUrls}}" data-itemid="{{idx}}" wx:key="id" wx:for-index="idx" wx:for-item="src">
<view >{{idx}}<image style="width: 100px; height: 100px; background-color: #eeeeee;" src="{{src}}"></image></view>
</view>
<mp-gallery show="{{show}}" showDelete="{{false}}" bindchange="change" binddelete="delete" bindhide="hide" img-urls="{{imgUrls}}" hide-on-click="{{true}}" current="{{current}}"></mp-gallery>
<view bindtap="galleryhide" class="gallery-cover-view {{show?'show':'hide'}}">关闭</view>
</view>WXSS代码：这个CSS内容主要是控制关闭按纽的。它仿写了原生的删除按纽CSS状态。并增加了显示隐藏的CSS项目。
.gallery-cover-view{ background-color: #0D0D0D;
color: #FFFFFF;
line-height: 60px;
min-height: 60px;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
text-align: center;
position: fixed;
bottom: 0px;
width: 100%;
z-index: 1001;
}
.show{
display: block;
}
.hide{
display: none;
}JS文件代码：在开始之初我们先定义图片数组，给它定义三个图片，然后默认打开 show设置为false 这样页面开始的时候它就不会被打开了，current设置为0 这个是打开的时候默认显示图片的索引值。在WXML里面通过参数调用的方式获取。
然后我们就可以开始写 imgList的点击事件。当图片被点击的时候 重新设置画廊组件的显示为 true 它第一张展示的索图值为 当前图点击的图片的索值。
Page({
data: {
//画廊功能
imgUrls: [
'http://desk-fd.zol-img.com.cn/g5/M00/02/05/ChMkJ1bKyZmIWCwZABEwe5zfvyMAALIQABa1z4AETCT730.jpg',
'https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg',
'http://www.zjkdh.com/Template/images/haogangcode.jpg'
],
show: false,
current:0
},
change(e) {
console.log('current index has changed', e.detail)
},
delete(e) {
console.log('delete', e.detail)
},
hide() {
this.setData({
show: false
})
},
galleryhide:function(){
this.setData({
show: false
})
},
//画廊结束
imgList:function(e){
//console.log(e);
//console.log(e.currentTarget.dataset.itemid);
//执行放大过程
this.setData({
show: true,
current:e.currentTarget.dataset.itemid
})
},
onLoad: function() {}
})OK。都写好之后来看一下效果吧。
如下图所示，我们有三张图片 ，通过数组的方式展示在界面上，当然这个是可以根据场景不同有不同的排版方式，我们因为只是做测试，所以随便排一下就好。
当点击任意图片的时候，会把图片放大，并显示关闭按纽。
你可以使用原生的 点击任意地方关闭，也可以使用点击关闭按纽关闭。这样，一个完美的画廊组件调用案例就完成了。