【微信小程序】之轮播图、swiper、swiper-item、banner组件使用

简介: 【微信小程序】之轮播图、swiper、swiper-item、banner组件使用

wxml

 

<swiper indicator-dots autoplay interval='3000'>
  <swiper-item wx:for="{{swipertItems}}" wx:key="*this">
    <image src="{{item}}" mode="aspectFill" />
  </swiper-item>
</swiper>

wxss

swiper {
  width: 100%;
  height: 200px;
  background: #f0f0f0;
}
 
swiper-item image {
  width: 100%;
  height: 100%;
}

js

Page({ 
  data: {
    swipertItems: [
      'http://www.shuzhiqiang.com/test/img/1.jpg', 'http://www.shuzhiqiang.com/test/img/2.jpg', 
      'http://www.shuzhiqiang.com/test/img/3.jpg',
      'http://www.shuzhiqiang.com/test/img/4.jpg',
      'http://www.shuzhiqiang.com/test/img/5.jpg',
    ],
    }, 
})



相关文章
|
2月前
|
小程序 JavaScript
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
【微信小程序】之顶部选项卡自定义tabs(不用mp-tabs扩展组件,太难用了)
|
2月前
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
40 1
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
|
2月前
|
小程序
微信小程序-其他常用组件
该内容是关于微信小程序组件的介绍,主要包括`button`、`image`和`navigator`。`button`组件比HTML的按钮功能更丰富,通过`open-type`可调用微信功能,如客服、转发等。组件属性包括类型(如`primary`、`warn`)和尺寸(`size`)。`image`组件默认宽300px,高240px,支持设置属性来调整显示效果。`navigator`组件用于页面导航,类似HTML的a标签,常用于页面间的跳转。
24 0
|
2月前
|
小程序
微信小程序-常用的基础内容组件
以下是内容的摘要: 本文介绍了微信小程序中几个重要的组件:text、rich-text和progress。text组件类似于HTML的span标签,用于显示文本,通过selectable属性可实现长按选中文本。rich-text组件能够将HTML字符串渲染成WXML结构,展示富文本内容。progress组件则用于展示进度条,支持不同状态(如成功、警告、等待等)以及自定义颜色和宽度。icon组件则提供了一组预定义的图标,可用于表示各种操作状态或提示信息。
21 0
|
2月前
|
小程序 前端开发 定位技术
微信小程序-常用的视图容器类组件
该内容是关于微信小程序组件的分类和部分具体组件的介绍。主要分为9大类:视图容器、基础内容、表单组件、导航组件、媒体组件、地图组件、画布组件、开放能力和无障碍访问。其中详细讲解了`view`、`scroll-view`、`swiper`及`swiper-item`等组件的用途和示例。`view`用于构建页面布局,`scroll-view`支持滚动效果,`swiper`则用于创建轮播图。此外,还提到了`root-portal`、`page-container`等其他特殊用途的组件。
24 0
|
2月前
|
小程序 JavaScript 数据库
微信小程序轮播图实现(超简单)
本文介绍了微信小程序使用内置swiper组件实现轮播图的简单方法。对于普通开发,示例代码展示了在wxml中配置swiper组件和嵌套image标签,以及相应的wxss样式设置。采用云开发时,wxml利用wx:for绑定数据列表,js部分展示如何从云端数据库获取数据并设置到list中。只需替换image的src为实际图片路径,即可完成轮播图功能。
45 0
|
8天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的在线答题微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
21 3
|
11天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
24 4
|
13天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
13天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园顺路代送微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园顺路代送微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)