微信小程序 轮播图且跳转微信公众号文章

  • 在页面的 WXML 文件中,使用 swiper 组件来实现轮播图:

    <view class="container"> <view class="swiperBox"> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="#9D9C9C" easing-function="linear" circular="true" indicator-active-color="#ffffff"> <block wx:for="{{bannerList}}" wx:key="unique"> <swiper-item> <image src="{{item.imgUrl}}" class="swiper-item" data-item="{{item}}" wx:if="{{item.imgUrl}}" catchtap="onSwiperTap"></image> <image src="../../assets/swiper.png" class="swiper-item" data-item="{{item}}" wx:else></image> </swiper-item> </block> </swiper> </view> </view>
  • 在上述代码中,bannerList 是一个数组,包含了轮播图的数据,每个数据对象需要有一个 imageUrl 字段,表示图片的地址。

  • indicator-dots 设置为 true 可显示轮播图的指示点。

  • autoplay 设置为 true 可自动播放轮播图。

  • circular 设置为 true 可实现循环播放。

  • js文件

    Page({
    data: {
    bannerList: [],
    indicatorDots: true,
    vertical: false,
    autoplay: true,
    interval: 2000,
    duration: 500,
    },
    onLoad() {
    // 获取轮播图的数据,可以通过接口请求或本地数据
    // 将数据设置到 bannerList 数组中
    },
    // 点击轮播图跳转
    onSwiperTap(e) {
    let url = e.target.dataset.item.articleUrl
    wx.navigateTo({
    url: '../article/index?url='+url,
    })

    复制代码
    },

    })

  • 新建一个article文件夹

    • wxml页面中

      <web-view src="{{url}}"></web-view>

  • js文件中

    Page({
    data: {
    url: ""
    },
    onLoad: function (options) {
    console.log(options,'kkkkkkk')
    this.setData({
    url: options.url,
    })
    }
    })

相关推荐
代码s贝多芬的音符1 小时前
ios android 小程序 蓝牙 CRC16_MODBUS
android·ios·小程序
狂团商城小师妹1 小时前
XYlease租赁商城小程序
微信·微信小程序·小程序
weixin_177297220691 小时前
家政小程序系统开发:打造便捷高效的家政服务平台
大数据·小程序·家政
2501_915909063 小时前
“绑定 HTTPS” 的工程全流程 从证书配置到真机验证与故障排查
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915918414 小时前
iOS 混淆实战 多工具组合完成 IPA 混淆、加固与工程化落地(iOS混淆|IPA加固|无源码混淆|Ipa Guard|Swift Shield)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者86 小时前
如何系统化掌握 iOS 26 App 耗电管理,多工具协作
android·macos·ios·小程序·uni-app·cocoa·iphone
2501_915921438 小时前
运营日志驱动,在 iOS 26 上掌握 App 日志管理实践
android·macos·ios·小程序·uni-app·cocoa·iphone
小小王app小程序开发10 小时前
盲盒小程序核心玩法深度解析:一番赏、无限赏及商业逻辑拆解
小程序
skywalk816310 小时前
用Trae自动生成一个围棋小程序
人工智能·小程序
顾青10 小时前
微信小程序 VisionKit 实战(二):静态图片人脸检测与人像区域提取
前端·微信小程序