微信小程序——焦点图 可预览查看大图缩放（多张可左右滑动） 带页码 loading 加载中 / https不显示图

微信小程序焦点图，可以滑动预览大图缩放

微信小程序自带焦点图swiper ，但是没有页码，只有小圆点，所以要自己写

（在查看大图时遇到一个问题，安卓上查看大图部分图不显示，经排查，发现不显示的图片地址是https，http的图片就没问题，上网搜，有的说是安卓证书的问题，有的说是域名问题，最终我也没确定是什么问题，有知道的可以告诉我~，我的最终解决办法是用replace把https全都替换成http了,详细贴在代码里了）

html

<!-- loading图 -->
<view class="load_style" hidden="{{!loading}}">
    <view>加载中...</view>
</view>
<!-- 焦点图 -->
<view  class="page-section page-section-spacing swiper">
    <swiper class='detail_swiper'
    indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
    interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px"  bindchange="getCurrent">
    <block wx:for="{{detail_data.houseinfo.imgs}}" wx:key="index" wx:for-item="cell" data-index="index">
        <swiper-item class='swiper_img' id="{{index}}" >
            <image bindtap="imgYu" src='{{cell}}' data-list="{{detail_data.houseinfo.imgs}}" wx:key="id" data-src="{{cell}}"  ></image>
            
        </swiper-item>
    </block>
    </swiper>

    <!-- 页码 "-->
    <view class='swiper_tit' >
        <text>{{swiperCurrent+1}}</text> / {{detail_data.houseinfo.imgs.length}}
    </view>
    <!--总数detail_data.houseinfo.imgs.length 是你图片的总数 页面内可以直接拿到长度-->
</view>
<!-- 焦点图 End -->

js (页码通过焦点图的current值得到)

data: {
    loading: true,//自定义加载中
   ///焦点图
    indicatorDots:false,//如果不要页码要小圆点 就true
    vertical: false,
    autoplay: true,
    circular: true,
    interval: 3000,
    duration: 1000,
    previousMargin: 0,
    nextMargin: 0,
    //焦点图页码
    swiperCurrent:0,
}

  onLoad: function (options) {

    this.getData(options);

  },

 //获取数据
getData: function (options){
        var that = this;
        houseid = { hid: '500139405' };//
    wx.request({
        url: '接口连接' + 参数,//json数据地址
        data: houseid,
        method: "post",
        //get时用
        //headers: { 'Content-Type': 'application/json' },
        //post时用
        header: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' },
        success: function (res) {      
            that.setData({
                detail_data: res.data.data,    
                loading: false, // 隐藏等待框                   
            })        
        }

    });
},

//得到焦点图current的值
getCurrent: function (e) {
    // parseInt(swiperCurrent)
    this.setData({
        swiperCurrent: e.detail.current,   //获取当前轮播图片的下标
    })

},

/**
 * 焦点图点击查看大图
*遇到的问题：真机查看时，发现苹果可以查看大图，安卓查看大图不显示，排查问题时发现，图片地址不一样 *https开头的图片地址安卓上查看不了大图，http的可以，所以就把https替换成http 经过测试就可以了，上网搜，有的说是安卓证书问题，最后反正是用替换解决了问题，如果有遇到同类的问题可以试一下
 * **/
imgYu: function (event){
	var src = event.currentTarget.dataset.src;//获取data-src,(自动识别data-后面的 如果是data-aaa这边就直接写aaa)
	var imgList = event.currentTarget.dataset.list;//获取data-list  是一个图片地址数据

//---------如果安卓不能查看大图可以替换一下http
   // var imgarr=[]
   // for (var i = 0; i<imgList.length;i++){//https 查看大图时不显示，换成http就可以了
     //   console.log(i)
     //   var newimg = imgList[i].replace('https', 'http')
        // console.log(newimg)
    //    imgarr.push(newimg)
   // }
   //---------
	// console.log(src)
	// console.log(imgList)
	//图片预览
	wx.previewImage({
		current: src, // 当前显示图片的http链接
		urls: imgList // 需要预览的图片http链接列表
        //urls: imgarr // 替换http用这个，需要预览的图片http链接列表

	})        
},

json数据格式

最后效果