小程序焦点图跳转到H5解决方案
一、先解决焦点图的点击事件
wxml部分
<swiper indicator-dots='true'
indicator-active-color='#ff5777'
autoplay='true'
circular='true'
interval='5000'
class='swiper'>
<block wx:for="{{bannerList}}" wx:key="index">
<swiper-item>
<image class="swiper-image" src="{{item.img_url}}" data-id="{{item.img_id}}" data-url="{{item.img_path}}" bindtap="swipclick" mode='scaleToFill'/>
</swiper-item>
</block>
</swiper>
js部分
swipclick:function(event){
console.log(event)
let item_url =event.currentTarget.dataset.url // 页面跳转地址
let tolink = '../../pages/h5view?url='+encodeURIComponent(item_url);
wx.navigateTo({
url: tolink,
})
console.log('嘿嘿')
},
二、制作一个空白page承载URL的加载内容
我这里在page/h5view创建了一个page
h5view.js在
/**
- 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let now_url =decodeURIComponent(options.url);
//获取url内容
url:now_url ,
this.setData({
url: now_url,
})
},
这里接收从navigateTo过来的参数
然后渲染到wxml里
<view class="container">
<view class="pageH5">
<web-view src="{{url}}"></web-view>
</view>
</view>