微信小程序——焦点图可预览查看大图缩放（多张可左右滑动）带页码 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,//如果不要页码要小圆点 就truevertical: 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数据格式

最后效果

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

微信小程序图片全屏预览组件，并解决svg真机显示黑屏问题
自己码了个微信小程序图片全屏预览组件,并解决了svg真机显示黑屏问题(即png等格式可以正常显示,但就svg无法显示). /*** 微信小程序图片预览组件* 1.支持预览svg.png.jpeg.jp ...
微信小程序 - 选择图片、预览图片、删除图片
为什么80%的码农都做不了架构师?>>> 小程序开发中你可能会遇到上传的图片首先会选择图片之后预览看下或者不满意需要删除图片,才会提交吧,这样应该是一个比较好的处理方式. 微信 ...
微信小程序在小米手机预览头部空白了
微信小程序在手机预览出现头部空白,代码查阅后,发现app.json里"navigationBarBackgroundColor": "black",的值不能写颜 ...
微信小程序图片轮播+预览效果实现
实现思路功能其实很简单,只需用到官方提供的swiper组件+wx.previewImage函数,再利用data-组件绑定当前的url即可轻松实现. 1.微信小程序swiper组件 2.微信小程序预览 ...
基于 PHP 实现的微信小程序 pdf 文件的预览服务
知识点微信小程序预览pdf文件问题描述前段时间文库类微信小程序开发中遇到个问题,就是要在小程序中预览阿里云 OSS 中的 pdf 文件.微信官方给的方案就一个,就是把文档缓存到本地然后用资源管理 ...
（保姆级解决方案）微信小程序【真机预览】无法向服务器发送请求（实测有效）
问题描述:微信小程序"打开调试模式可以发出请求,关闭调试模式无法发出请求" 一.小程序配置request合法域名 1 获取uni-cloud官网提供的request合法域名这个获 ...
微信小程序图片选择，预览和删除
这里均用的是小程序原生api 废话不多说直接上栗子: <view class="addImv"><view wx:f ...
微信小程序选择图片和预览图片
作者>:燕潇洒视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片. wx.chooseImage({}) 此方法是用来选择图片的方法,具体使用如下: data: {av ...
【微信小程序】下载并预览文档——pdf、word、excel等多种类型
简要:wx.downloadFile(OBJECT)下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径.wx.openDocument(OBJECT)新开页面打开文 ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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