-
在页面的 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,
})
}
})
微信小程序 轮播图且跳转微信公众号文章
皮卡穆2023-12-14 8:01
相关推荐
说私域3 小时前
互联网生态下赢家群体的崛起与“开源AI智能名片链动2+1模式S2B2C商城小程序“的赋能效应The_era_achievs_hero10 小时前
微信小程序71~80dssxyz11 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大!win !12 小时前
被老板怼后,我为uni-app项目引入环境标志澄江静如练_15 小时前
微信小程序发体验版流口水的兔子19 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,呆呆的心19 小时前
大厂面试官都在问的 WEUI Uploader,源码里藏了多少干货?🤔一念杂记19 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!张晓~1833994812121 小时前
数字人源码部署流程分享--- PC+小程序融合方案拖孩1 天前
微信群太多,管理麻烦?那试试接入AI助手吧~