标签 小程序 下的文章

 #多维数组创建
let app_info =[
    {appid:info[appid],path:info[path],extend_data:info[extend_data]}
  ]

 #一维数组创建

let app_info ={appid:info[appid],path:info[path],extend_data:info[extend_data]}
  

    swipclick:function(event){
  console.log(event)
  let item_url =event.currentTarget.dataset.url // 页面跳转地址
  console.log(item_url)
  let tolink  = '../../pages/h5view?url='+encodeURIComponent(item_url);
  if(item_url){
    //先提示后跳转
     wx.showModal({
      title: '跳转提示',
      content: '您即将离开XXX,请注意您的账号和财产安全!',
      confirmColor: "#1aad19",
      success: function (sm) {
          if(sm.confirm){
              wx.navigateTo({
              url: tolink,
              })
          }
      }
   })
  }
  console.log('嘿嘿')
},

一、先解决焦点图的点击事件
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>

wxml代码

<view class="notice">
<view class="title">公告:</view>
<swiper class="swiper_container" vertical="true" autoplay="true" circular="true" interval="2000">
    <block wx:for="{{msgList}}" wx:key="{{item}}">
      <navigator url="/pages/index/index?title={{item.url}}" open-type="navigate">
        <swiper-item>
          <view class="swiper_item">{{item.title}}</view>
        </swiper-item>
      </navigator>
    </block>
  </swiper>
  </view>

数据js

msgList: [
{ url: "url", title: "多地首套房贷利率上浮 热点城市渐迎零折扣时代" },
{ url: "url", title: "悦如公寓三周年生日趴邀你免费吃喝欢唱城市渐迎零折扣时代" },
{ url: "url", title: "你想和一群有志青年一起过生日嘛?" }],
wxss样式

.notice {
 width: 750rpx;
 position: relative;
 margin-top:12rpx;
 }
.notice .title{
 width: 151rpx; 
 float: left;
 text-align: center;
 font-size: 30rpx;
 line-height:55rpx;
}
.notice .swiper_container {
height: 55rpx;
width: 600rpx;
line-height:55rpx;
float: right;
}