微信小程序轮播图开发

一、js

数据： {主机： getApp()。globaldata。baseurl，旋转木马：[]，}，onLoad:函数（选项){这个。请求传送带数据()；//请求轮播图}, //请求轮播图requestcarouseistdata(){ var=this；//注意这指向性问题var urlStr=那个。数据。主机'/xjj/chome _ carousel _ list。JSON '；//请求连接注意替换（我用本地服务器模拟)console.log('请求轮播图：' urlStr)；wx.request({ url: urlStr，data: {//这里放请求参数，如果传入参数值不是字符串，会被转换成String //x: ' '，//y: '' }，header : { ' content-type ' : ' application/JSON '//默认值},成功(res) { console.log('轮播图返回值：');控制台。日志数据。结果)；var resultArr=RES . data。结果；那个。setdata({ carousel ist : result arr })})}，//点击了轮播图chomeCarouselClick:函数（事件){ var urlStr=event。当前目标。数据集。网址；console.log('点击了轮播图：' urlStr)；//wx。navigateto({//URL : '测试？id=1 '/})}，

2. wxml

！-轮播图-view class=' carousel ' swiper class=' carousel _ swiper ' indicator-dots=' true ' indicator-color=' # f4f 4 ' indicator-active-color=' # 4eb 8b 8 ' autoplay=' true ' interval=' 2000 '圆形=' true ' block wx : for=' { { carousel list } } ' wx : key=' key ' swiper-item bind tap=' chomecarousel click ' data-URL=' { { item。URL } } '图像几个有用的说明：指示器-点是否显示指示器指示器颜色指示器默认颜色指示器-活动-颜色指示器选中颜色自动播放是否自动播放间隔每一页停留的时长圆形的；循环的播放到最后一页后是否再衔接第一页循环播放*/

三、wxss

页{ //这个是当前页整体的背景色背景-颜色： # F4 F4；}.转盘{宽度： 100%;背景色： rebecazure}.carousel _ swiper {宽度： 100%；高度： 400 rpx显示器：块；相对位置：背景： # F4 F4；}.旋转木马{宽度： 100%；高度：继承；} 运行截图。png

附件

本地服务器轮播图的数据chome _ carousel _ list。JSON { ' result ' :[{ ' id ' : ' 101 '，' img ' : '/xjj/img/carousel _ 1。png '，' title': '，' URL ' : ' https://www。百度。com/' }，{ 'id': '102 '，' img ' : '/xjj/img/carousel _ 2。巴布亚新几内亚百度翻译，' URL ' : ' https://fany。百度。com/' }，{ 'id': '103 '，' img ' : '/xjj/img/carousel _ 3。png '，' title': '百度地图，' URL ' : ' https://映射。百度。com/' }，{ 'id': '104 '，' img ' : '/xjj/img/carousel _ 4。png '，' title': '简书是一个写博客的网站，挺好用的，可以试试看，'网址' : ' https://www。健叔。com/' }]}微信小程序轮播图开发参考文档：https://开发者。微信。QQ。com/mini program/dev/component/swiper。超文本标记语言