当前位置: 开发笔记 > 运维 > 正文

微信小程序开发之滑块视图容器(swiper)详解及实例代码

作者：vegg巛iegbaby | 来源：互联网 | 2022-09-14 03:17

这篇文章主要介绍了微信小程序开发之滑块视图容器(swiper)详解及实例代码的相关资料,需要的朋友可以参考下

微信小程序开发之滑块视图容器详解

实现效果图：

这里写图片描述

实现起来特别简单，看看代码是怎么写的呢：

这就是布局了，看一下js里面代码：

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'],
    indcatorDots: true,
    autoPlay: true,
    interval: 5000,
    duration: 500
  },

，swiper有以下一些常用属性：

这里写图片描述

标记的两个属性暂时不管。

注意：其中只可放置组件，否则会导致未定义的行为。

swiper-item

仅可放置在组件中，宽高自动设置为100%。

就是这样，自己动手试试。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

推荐阅读

容器
使用flex弹性布局来为微信小程序写自适应页面

我们知道，写习惯了前端的人，一般切图后布局页面的话，上手最习惯的是基于盒子模型的浮动布局，依赖display属性positi ... [详细]

蜡笔小新 2023-10-17 17:06:23
容器
微信答题小程序的设计与实现详解

本文详细介绍了如何设计和实现一个微信答题小程序，包括题库的设计和题目的呈现。通过抽取题目编号和使用全局变量记录当前题目的信息，实现了题目的刷新和显示。同时，还介绍了题目的展示方式和容器的创建。本文适合零基础的小白学习微信答题小程序的开发。 ... [详细]

蜡笔小新 2023-12-10 10:34:34
服务器
Web学习历程记录（七）——Tomcat基本概念和配置

本文介绍了Web学习历程记录中关于Tomcat的基本概念和配置。首先解释了Web静态Web资源和动态Web资源的概念，以及C/S架构和B/S架构的区别。然后介绍了常见的Web服务器，包括Weblogic、WebSphere和Tomcat。接着详细讲解了Tomcat的虚拟主机、web应用和虚拟路径映射的概念和配置过程。最后简要介绍了http协议的作用。本文内容详实，适合初学者了解Tomcat的基础知识。 ... [详细]

蜡笔小新 2023-12-13 17:08:24
服务器
如何实现微信支付宝小程序二码合一的点餐功能？

本文讨论了如何在微信支付宝两套小程序中生成一张二维码，实现支付宝扫码进入支付宝小程序和微信扫码进入微信小程序的对应桌号进行点餐的功能，提供了一些实现方案供参考。 ... [详细]

蜡笔小新 2023-12-13 12:47:25
服务器
微信开放外链的第二阶段：腾讯和阿里巴巴的博弈

2021年11月30日，微信开始进行“开放外链”的第二阶段，允许在微信个人会话中打开外部链接和在微信群中打开电商链接。虽然这是腾讯和阿里巴巴都能接受的阶段性结果，但双方都不会太满意。接下来几个月，腾讯和阿里将展开复杂的博弈，我们作为外人很难看清全过程。工信部从未要求腾讯无条件开放微信API，本次开放的也只是普通的HTTP链接。 ... [详细]

蜡笔小新 2023-12-12 10:04:42
服务器
小程序获取用户信息按钮返回中文地址

1.我是根据官方文档中描述去写的按钮可以看到button中加了zh_CNopen-typegetUserInfobindgetuserinfogetU ... [详细]

蜡笔小新 2023-12-12 02:53:11
服务器
小程序自动授权和手动接入的方式及操作步骤

本文介绍了小程序支持的两种接入方式：自动授权和手动接入，并详细说明了它们的操作步骤。同时还介绍了如何在两种方式之间切换，以及手动接入后如何下载代码包和提交审核。 ... [详细]

蜡笔小新 2023-12-11 18:21:09
服务器
小程序商城如何引进流量的优化策略与方法

本文介绍了小程序商城引进流量的优化策略与方法。首先，通过附近小程序功能可以增加周围门店的方位并展示，吸引附近用户。其次，利用微信群聊功能，将小程序分享到多个微信群聊中，扩大影响力。最后，通过设置一些固定的活动机制，打造仪式感来吸引用户。这些方法能够有效提升小程序商城的流量，增加用户数量。 ... [详细]

蜡笔小新 2023-12-11 15:04:32
服务器
微信小程序导航跟随的实现方法

本文介绍了在微信小程序中实现导航跟随的方法。通过设置导航的position属性和绑定滚动事件，可以实现页面向下滚动到导航位置时，导航固定在页面最上方；页面向上滚动到导航位置时，导航恢复到原始位置；点击导航可以平滑跳转到相应位置。代码示例也给出了具体实现方法。 ... [详细]

蜡笔小新 2023-12-09 19:38:28
server
微信民众号商城/小顺序商城开源项目介绍及使用教程

本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目，包括前端和后端的目录结构，以及所使用的技术栈。同时提供了项目的运行和打包方法，并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接，以及加入前端交流QQ群的方式。 ... [详细]

蜡笔小新 2023-12-09 08:45:47
server
14亿人的大项目，腾讯云数据库拿下！

全国人 ... [详细]

蜡笔小新 2023-10-17 17:56:19
server
微信小程序订阅消息对接详细记录

起因由于我录制过一个小程序的课程，里面有消息模板的讲解。最近有几位同学反馈官方要取消消息模板，使用订阅消息。为了方便大家容易学 PythonFlask构建微信小程序订餐系统课程。 ... [详细]

蜡笔小新 2023-10-17 17:27:38
kubectl
云原生边缘计算之KubeEdge简介及功能特点

本文介绍了云原生边缘计算中的KubeEdge系统，该系统是一个开源系统，用于将容器化应用程序编排功能扩展到Edge的主机。它基于Kubernetes构建，并为网络应用程序提供基础架构支持。同时，KubeEdge具有离线模式、基于Kubernetes的节点、群集、应用程序和设备管理、资源优化等特点。此外，KubeEdge还支持跨平台工作，在私有、公共和混合云中都可以运行。同时，KubeEdge还提供数据管理和数据分析管道引擎的支持。最后，本文还介绍了KubeEdge系统生成证书的方法。 ... [详细]

蜡笔小新 2023-12-14 16:49:01
容器
胡蜂能进行逻辑推理的研究成果

最新研究表明，胡蜂具备一定的逻辑推理能力，能够进行传递性推理。研究人员通过实验发现，胡蜂在避免电击的测试中，能够正确选择符合逻辑的选项。这项研究成果对于了解无脊椎动物的认知能力具有重要意义，也为解析胡蜂社会结构的进化提供了线索。 ... [详细]

蜡笔小新 2023-12-14 14:05:05
服务器
Hyperledger Fabric外部链码构建与运行的开发笔记

本文介绍了Hyperledger Fabric外部链码构建与运行的相关知识，包括在Hyperledger Fabric 2.0版本之前链码构建和运行的困难性，外部构建模式的实现原理以及外部构建和运行API的使用方法。通过本文的介绍，读者可以了解到如何利用外部构建和运行的方式来实现链码的构建和运行，并且不再受限于特定的语言和部署环境。 ... [详细]

蜡笔小新 2023-12-13 21:47:39

vegg巛iegbaby

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章