实现滑块视图容器 swiper

最新推荐文章于 2024-06-19 11:49:03 发布

k195514239

最新推荐文章于 2024-06-19 11:49:03 发布

阅读量783

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： swiper

本文链接：https://blog.youkuaiyun.com/k195514239/article/details/73275001

微信小程序专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何使用微信小程序的swiper组件创建自动播放的滑块视图，并通过wx.request获取动态数据填充滑块内容。示例代码展示了如何配置swiper的基本属性及数据请求的成功回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现滑块视图容器 swiper

wxml:

js:

wx.request({
url: '',//上线的话必须是https，没有appId的本地请求貌似不受影响
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function (res) {
console.log(res.data.result)

self.setData({
icons: res.data.result
})
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})

数据格式：

echo "{\"code\":0,\"message\":\"success\",\"result\":[[{\"id\": \"1\",\"img\": \"/imgs/index/icon_1.jpg\",\"name\": \"美食\",\"url\": \"\"},{\"id\": \"2\",\"img\": \"/imgs/index/icon_2.jpg\",\"name\": \"超市\",\"url\": \"\"},{ \"id\": \"3\",\"img\": \"/imgs/index/icon_3.jpg\",\"name\": \"鲜果购\",\"url\": \"\"},{\"id\": \"4\",\"img\": \"/imgs/index/icon_4.jpg\",\"name\": \"下午茶\",\"url\": \"\"},{\"id\": \"5\",\"img\": \"/imgs/index/icon_4.jpg\",\"name\": \"下午茶\",\"url\": \"\"},{\"id\": \"6\",\"img\": \"/imgs/index/icon_4.jpg\",\"name\": \"下午茶\",\"url\": \"\"},{\"id\": \"7\",\"img\": \"/imgs/index/icon_4.jpg\",\"name\": \"下午茶\",\"url\": \"\"},{\"id\": \"8\",\"img\": \"/imgs/index/icon_4.jpg\",\"name\": \"下午茶\",\"url\": \"\"}],[{\"id\": \"1\",\"img\": \"/imgs/index/icon_1.jpg\",\"name\": \"美食1\",\"url\": \"\"},{\"id\": \"2\",\"img\": \"/imgs/index/icon_2.jpg\",\"name\": \"超市1\",\"url\": \"\"},{ \"id\": \"3\",\"img\": \"/imgs/index/icon_3.jpg\",\"name\": \"鲜果购\",\"url\": \"\"},{\"id\": \"4\",\"img\": \"/imgs/index/icon_4.jpg\",\"name\": \"下午茶\",\"url\": \"\"},{\"id\": \"5\",\"img\": \"/imgs/index/icon_4.jpg\",\"name\": \"下午茶\",\"url\": \"\"},{\"id\": \"6\",\"img\": \"/imgs/index/icon_4.jpg\",\"name\": \"下午茶\",\"url\": \"\"},{\"id\": \"7\",\"img\": \"/imgs/index/icon_4.jpg\",\"name\": \"下午茶\",\"url\": \"\"},{\"id\": \"8\",\"img\": \"/imgs/index/icon_4.jpg\",\"name\": \"下午茶\",\"url\": \"\"}]]}";