原生小程序 之 使用WeUI组件库的 mp-gallery 画廊

原生小程序 之 使用WeUI组件库的 mp-gallery 画廊

• 展示img图表
• 点击img，展示大图
  

about.wxml

<view class="page">
    <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 style="height: 100%;width: 100%;" show="{{show}}"  imgUrls="{{ imgUrls }}"   current="{{current}}" showDelete="{{false}}" hideOnClick="{{true}}"></mp-gallery>
</view>

about.js

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
},
 //画廊结束
imgList:function(e){
  // console.log(e.currentTarget.dataset.itemid);
  //执行放大过程
  this.setData({
    show: true,
    current:e.currentTarget.dataset.itemid
  })
 },
  onLoad: function() {}
})

about.json

{
  "usingComponents": {
    "mp-gallery": "/miniprogram_npm/weui-miniprogram/gallery/gallery"
  }
}

about.wxss

/* pages/about/about.wxss */
page {
  height: 100%;
}
.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;
  }