手把手教你搭建属于自己的小程序系列-------小程序轮播图
先看效果图：
1 wxml
<view class="main">
<swiper indicator-dots="true" autoplay="true" interval="{{interval}}" duration="{{duration}}" circular="true" indicator-active-color="#1ecf0d">
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
<swiper-item>
<view class="floatimg">
<image src="{{item}}" class="slide-image" width="100%" />
</view>
</swiper-item>
</block>
</swiper>
</view>
代码里面用到了微信提供api swiper 滑块视图容器。
2 js
data: {
/**
* 页面的初始数据
*/
imgUrls: [
"http://etwjsc.com/images/ban3.jpg",
"https://img13.360buyimg.com/n2/jfs/t18253/90/308592061/391168/7b01505c/5a69897aN782f6abc.jpg",
"https://img13.360buyimg.com/n2/jfs/t18253/90/308592061/391168/7b01505c/5a69897aN782f6abc.jpg"
],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔,3s
duration: 1000, // 滑动动画时长1s
},
3官方API swiper滑块视图容器
是不是也超级简单，如果你认真看微信官方提供API你就不会看到我这篇文章了
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
底部有红色箭头的部分都是常用的属性~~~
以上实现的小程序轮播图并不能解决我们在实际开发中实现的小程序轮播图，也就是说我们在工作中需要和后台合作，后台传过来的数据我们将数据展示在界面上。
4轮播图获取后台传来的数据展示界面上
ajax 封装了小程序的网络数据请求
const api = 'https://liuli.cn/wxShop/';
// common.js
function request(opt) {
// set token
wx.request({
method: opt.method || 'GET',
url: api + opt.url,
header: {
'content-type': 'application/json' // 默认值
},
data: opt.data,
success: function (res) {
if (res.data.code == 100) {
if (opt.success) {
opt.success(res.data);
}
} else {
console.error(res);
wx.showToast({
title: res.data.message,
})
}
}
})
}
module.exports.request = request
js
data: {circular: true,
//是否显示画板指示点
indicatorDots: true,
//选中点的颜色
//是否竖直
vertical: false,
//是否自动切换
autoplay: true,
//自动切换的间隔
interval: 3000,
//滑动动画时长毫秒
duration: 1000,
//所有图片的高度
imgheights: [],
//图片宽度
imgwidth: 750,
//默认
current: 0,
userData: [],
carousel: null,
},
onLoad: function() {
var that = this;
this.carouselShow();
},
carouselShow: function(success) {
var that = this;
ajax.request({
method: 'GET',
url: 'home/banners?key=' + utils.key,
success: data => {
that.setData({
banners: data.result
})
console.log(data.result)
}
})
},
5小程序网络请求
地址：https://developers.weixin.qq.com/miniprogram/dev/api/wx.request.html
准备：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
6如果下载了他人的小程序源码，自己也没有配置域名，解决如下：
- 第一可以配置其他人域名，
- 第二在小程序开发工具中，将不校验合法域名勾上即可
是不是觉得小程序，超级简单，有木有很开心~~~
这是我模仿京东到家小程序代码，可V18069803206获取源码
如果你有关关于微信小程序各种问题
请关注我个人微信号 V18069803206
我会尽我所能解答你的疑惑
7源码下载
链接：https://pan.baidu.com/s/1bbwF6JtJbKBMQ45d77MzNg
提取码：j5ah