微信小程序学习：（三）轮播图

最新推荐文章于 2024-04-04 11:22:46 发布

老道忘了

最新推荐文章于 2024-04-04 11:22:46 发布

阅读量343

点赞数

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

本文链接：https://blog.csdn.net/weixin_39459768/article/details/96477305

版权

本文介绍如何在微信小程序中创建轮播图。通过在lessions页面展示轮播图和lession列表，利用localData.js模拟数据，lession.js获取数据，lession.wxml和lession.wxss实现轮播图的布局和样式。使用swiper组件，通过wx:for和wx:key进行列表渲染。

摘要由CSDN通过智能技术生成

微信小程序学习：（三）轮播图

项目地址：https://github.com/leoricding/-

我创建了lessions页面，用于展示轮播图及lession列表。

（一）本地数据localData.js

用于模拟远程数据，目录结构如下

# 在这里插入图片描述

let localData=[
  {
   
    avatar:'../../data/images/avatar/00.jpg',
    carousel:'../../data/images/carousel/00.jpg',
  },
  {
   
    avatar: '../../data/images/avatar/01.jpg',
    carousel: '../../data/images/carousel/01.jpg',
  },
  {
   
    avatar: '../../data/images/avatar/02.jpg',
    carousel: '../../data/images/carousel/02.jpg',
  },
  {
   
    avatar: '../..