微信小程序 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。都写好之后来看一下效果吧。
如下图所示,我们有三张图片 ,通过数组的方式展示在界面上,当然这个是可以根据场景不同有不同的排版方式,我们因为只是做测试,所以随便排一下就好。
当点击任意图片的时候,会把图片放大,并显示关闭按纽。
你可以使用原生的 点击任意地方关闭,也可以使用点击关闭按纽关闭。这样,一个完美的画廊组件调用案例就完成了。