13039339994

合作意向表

您需要的服务

预算: 3-4千 5-8千 1-5万 5-8万 8万以上

 
微信小程序轮播图开发?
2021-11-23

一、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'

// })

},

2. wxml

/*几个有用的说明:

indicator-dots 是否显示指示器

indicator-color 指示器默认颜色

indicator-active-color 指示器选中颜色

autoplay 是否自动播放

interval 每一页停留的时长

circular 播放到最后一页后是否再衔接第一页循环播放

*/

三、wxss

page { //这个是当前页整体的背景色

background-color: #f4f4f4;

}

.carousel{

width: 100%;

background-color: rebeccapurple;

}

.carousel_swiper{

width: 100%;

height: 400rpx;

display: block;

position: relative;

background: #f4f4f4;

}

.carouselImg{

width: 100%;

height: inherit;

}

运行截图.png

附件

本地服务器 轮播图的数据 chome_carousel_list.json

{

"result": [{

"id": "101",

"img": "/xjj/img/carousel_1.png",

"title": "",

"url": "https://www.baidu.com/"

},

{

"id": "102",

"img": "/xjj/img/carousel_2.png",

"title": "百度翻译",

"url": "https://fanyi.baidu.com/"

},

{

"id": "103",

"img": "/xjj/img/carousel_3.png",

"title": "百度地图",

"url": "https://map.baidu.com/"

},

{

"id": "104",

"img": "/xjj/img/carousel_4.png",

"title": "简书是一个写博客的网站,挺好用的,可以试试看",

"url": "https://www.jianshu.com/"

}

]

}

微信小程序轮播图开发参考文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

 
阅读下一篇
关于小程序恶意对抗平台规则的违规行为公告
 
 
推荐阅读
微信小程序是干嘛的
做网站建设中哪些部分是我们可以快速调整的?
做网站优化不仅要关注排名本身,更要关注网站
[餐饮APP开发]解决方案
做好SEO优化的四个点
关于小程序恶意对抗平台规则的违规行为公告
 
准备开展业务?
联系专业的商务顾问,诊查网站现状及关键词、分析竞争对手的流量、一对一咨询、及其报价详情
嘿,我来帮您!