AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

小程序的swiper组件

2023-12-07 120
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 小程序的swiper组件

滑块视图容器

swiper | 微信开放文档

简单的滑动图片

wxml 中定义

<swiper>
  <swiper-item wx:for="{{imgUrls}}">
    <image src="{{item}}" width="355" height="150"/>
  </swiper-item>
</swiper>

js 中定义

Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: [
      'https://img.alicdn.com/tfs/TB1FjZ7VWL7gK0jSZFBXXXZZpXa-520-280.png',
      'https://gtms03.alicdn.com/tps/i3/TB1gXd1JXXXXXapXpXXvKyzTVXX-520-280.jpg',
      'https://gtms01.alicdn.com/tps/i1/TB1r4h8JXXXXXXoXXXXvKyzTVXX-520-280.jpg'
    ],
文章标签：
小程序
JavaScript
容器
关键词：
小程序swiper
小程序swiper组件
码农日常
目录
相关文章
chnjames
|
25天前
|
小程序 数据可视化 JavaScript
微信小程序：轻松实现时间轴组件
本文介绍了如何在微信小程序中实现一个可视化时间轴组件。该组件适用于展示用户资金流动、投资结算等时间节点，帮助用户直观了解资金去向。时间轴支持自定义节点形状、显示序号、倒序排列等功能，并通过插槽灵活定义动态内容。文中详细介绍了组件的设计与使用方法，以及如何结合动态 slot 实现自定义操作。该组件为展示用户资金信息提供了美观、易用的解决方案。
chnjames
54 1
微信小程序：轻松实现时间轴组件
邹荣乐
|
24天前
|
小程序
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
微信小程序动态tabBar实现：基于自定义组件，灵活支持不同用户角色与超过5个tab自由组合（更新版）
邹荣乐
324 1
chnjames
|
25天前
|
小程序 搜索推荐 API
微信小程序：自定义关注公众号组件样式
尽管关注公众号组件的样式固定且不可修改，但产品经理的需求却需要个性化的定制。在这种情况下，我们需要寻找解决方案，以满足这些特殊需求，尽管这可能有点棘手。
chnjames
54 0
微信小程序：自定义关注公众号组件样式
邹荣乐
|
28天前
|
小程序 前端开发 JavaScript
微信小程序图表制作利器：ECharts组件的使用与技巧
微信小程序图表制作利器：ECharts组件的使用与技巧
邹荣乐
48 1
邹荣乐
|
28天前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
邹荣乐
153 1
Codelinghu
|
1月前
|
小程序 JavaScript
微信小程序之input组件及其获取用户输入信息
微信小程序之input组件及其获取用户输入信息
Codelinghu
46 1
杀死一只知更鸟debug
|
2月前
|
小程序 容器
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
本文介绍了微信小程序中常用组件的使用方法，包括view、scroll-view、swiper与swiper-item、text与rich-text、button以及image组件。详细解释了各组件的功能、属性以及如何在小程序页面中进行使用。
杀死一只知更鸟debug
113 0
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image
Codelinghu
|
1月前
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
Codelinghu
43 0
番茄酱脑袋
|
3月前
|
人工智能 小程序 编译器
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件（functional-mini）来确保组件逻辑适配到双端，如何实现
Ant Design Mini 问题之Antd Mini 使用小程序函数式组件（functional-mini）来确保组件逻辑适配到双端，如何实现
番茄酱脑袋
67 1
番茄酱脑袋
|
3月前
|
小程序 前端开发 API
Ant Design Mini 问题之在微信小程序中，由于不支持slot特性，Ant Design Mini的什么组件功能受到了限制，如何解决
Ant Design Mini 问题之在微信小程序中，由于不支持slot特性，Ant Design Mini的什么组件功能受到了限制，如何解决
番茄酱脑袋
94 1

热门文章

最新文章

  • 1
    阿里20亿小程序繁星计划你最需要知道的几个问题（0325更新）
  • 2
    小程序审核常见驳回类型
  • 3
    微信小程序获取input值的方法
  • 4
    【视频教程】微信小程序开发-初探篇
  • 5
    微信小程序把玩（十四）button组件
  • 6
    【微信小程序登录错误】"code":-1,"error":"ERR_GET_SESSION_KEY\n{\"code\":0,\"message\":\"\",\"codeDesc\":\"Succe
  • 7
    微信小程序新增推广功能，支持自定义关键词
  • 8
    微信小程序：引入阿里巴巴矢量图标库iconfont
  • 9
    微信小程序把玩（十三）progress组件
  • 10
    微信小程序（十七）小程序监听返回键跳转事件（安卓返回也适用）
  • 1
    高德地图实现-微信小程序地图导航
    294
  • 2
    微信小程序封装请求
    66
  • 3
    性能工具之JMeter 微信小程序 WebSocket 脚本入门
    211
  • 4
    html在线预览CAD（手机小程序浏览DWG）二次开发图层表的方法
    128
  • 5
    微信小程序用户登陆和获取用户信息功能实现
    109
  • 6
    uniapp-微信小程序-上拉和下拉触底刷新
    144
  • 7
    外卖小程序实战-接单后小票机自动打印订单
    161
  • 8
    微信小程序和springboot实现微信支付
    205
  • 9
    外卖小程序实战
    51
  • 10
    微信小程序-微信支付
    66

    • 相关课程

    更多
  • IoT小程序框架课程

    • 相关电子书

    更多
  • 《云市场-小程序》
  • 数字乡村建设方案
  • mPaaS 小程序新品发布

    • 相关实验场景

    更多
  • 1分钟SAE部署PHP商城小程序
  • 阿里云IoT小程序应用开发和组件实践
  • 搭建IoT小程序开发环境，创建一个应用
  • EMAS Serverless搭建《私人云相册》小程序
  • 基于小程序Serverless开发个人相册小程序
    • 下一篇
    无影云桌面