微信小程序轮播图demo
2023-02-18 16:30:16 时间
1.wxml
<!-- 轮播图 -->
<view class="box">
<swiper class='swiper' indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#4eb8b8" autoplay="true" interval='2000' circular='true'>
<block wx:for="{{imgList}}" wx:key="imgList">
<swiper-item bindtap='chomeCarouselClick' data-url='{{item.url}}'>
<image class="img" src='{{item.url}}' mode='aspectFill' ></image>
</swiper-item>
</block>
</swiper>
</view>
/*
indicator-dots 是否显示指示器
indicator-color 指示器默认颜色
indicator-active-color 指示器选中颜色
autoplay 是否自动播放
interval 每一页停留的时长
circular 播放到最后一页后是否再衔接第一页循环播放
*/
2.wxss
page { //当前页背景色
background-color: #f4f4f4;
}
.box{
width: 100%;
background-color: reb;
}
.swiper{
width: 100%;
height: 400rpx;
display: block;
position: relative;
background: #f4f4f4;
}
.img{
width: 100%;
height: inherit;
}
3.js
data: {
host: getApp().globalData.baseUrl,
carouselList:[],
},
onLoad: function (options) {
this.requestCarouselListData();//请求轮播图
},
//请求轮播图
requestCarouselListData(){
var that = this;//注意this指向性问题
var urlStr = that.data.host + "/xjj/chome_carousel_list.json"; //请求连接注意替换(我用本地服务器模拟)
console.log("请求轮播图:" + urlStr);
wx.request({
url: urlStr,
data: {//这里放请求参数,如果传入参数值不是String,会被转换成String
// x: '',
// y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log("轮播图返回值:");
console.log(res.data.result);
var resultArr = res.data.result;
that.setData({
carouselList: resultArr
})
}
})
},
//点击了轮播图
chomeCarouselClick: function (event) {
var urlStr = event.currentTarget.dataset.url;
console.log("点击了轮播图:" + urlStr);
// wx.navigateTo({
// url: 'test?id=1'
// })
},
相关文章
- 利用Frida绕过Android App(apk)的SSL Pinning
- Flask 框架:运用Axios库实现前后端交互
- 搭建Typecho小程序(QQ微信通用)
- Drozer-Android安全测试
- 个推支持小程序消息推送,助力开发者实现用户高触达、高转化
- android 终端模拟器
- android 系统浏览器 源码-Android 最最最简单的浏览器代码
- Android画中画(PIP)模式使用
- Android画中画(PIP)进阶---Action按钮的使用
- Android Kotlin制作签名白板并保存图片
- IOS中block和代理
- iOS对象属性详解
- ios多线程-GCD基本用法
- IOS开发-KVC
- IOS开发-KVO
- ASP.NET Core Web App应用第三方Bootstrap模板
- ABP入门系列(14)——应用BootstrapTable表格插件
- 软件分享 | 第十六期 安卓免费漫画APP
- 搭建IOS和Android性能监控工具
- 软件分享 | 第十九期 办公必备、证件扫描,文档提取(安卓/苹果端)