小程序宿主环境-组件swiper

10月前作者：笔写落去分类：Toy博客阅读(43) 违法举报

这篇具有很好参考价值的文章主要介绍了小程序宿主环境-组件swiper。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

巧识小程序的开发过程学习.

在我们的list.wxml中创建组件

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="grey" autoplay interval="2000" circular>
  <!--第一个轮播图-->
  <swiper-item>
    <view class="item">A</view>
  </swiper-item>
  <!--第二个轮播图-->
  <swiper-item>
    <view class="item">B</view>
  </swiper-item>
  <!--第三个轮播图-->
  <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

在我们list.wxss创建样式

/* pages/list/list.wxss */
.swiper-container{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1){
background-color: sandybrown;
}
swiper-item:nth-child(2){
  background-color: rgb(106, 111, 158);
}
swiper-item:nth-child(3){
  background-color: rgb(136, 41, 48);
  }

效果实现轮播图

小程序宿主环境-组件swiper,小程序开发,小程序,微信小程序

swiper组件的常用属性

属性indicator-dots:是否显示面板指示点

属性indicator-color:指示点颜色

属性indicator-active-color:指示点激活颜色

属性autoplay:是否自动切换

属性interval:自动切换的时间默认5s

属性circular:是否循环轮播文章来源地址https://www.toymoban.com/news/detail-821554.html

到了这里，关于小程序宿主环境-组件swiper的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

改造微信小程序Swiper组件，自定义切换动画

index.tsx index.less conts.ts 改造Swiper组件，符合业务的设计和动画效果

2024年04月15日
浏览(51)
微信小程序之项目基本结构、页面的基础及宿主环境

微信小程序的项目基本结构、页面的基础及宿主环境新建一个微信小程序项目，其项目基本结构如下： pages用来存放所有小程序的页面 utils用来存放工具性质的模块（例如：格式化时间的自定义模板） app.js小程序项目的全局配置文件 app.json小程序项目的全局配置文件 app.wx

2024年02月03日
浏览(50)
微信小程序swiper 视频中间大，两边小，轮播滑到中间视频自动播放组件教程

静态效果：进入下面小程序可以体验效果，点击底部看剧栏目

2024年02月20日
浏览(59)
【微信小程序】-- 常用视图容器类组件介绍 -- view、scroll-view和swiper（六）

💌 所属专栏：【微信小程序开发教程】 😀 作者：我是夜阑的狗🐶 🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享，欢迎咨询！ 💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘 大家好，又见面了，

2024年01月18日
浏览(61)
微信小程序常用组件的简单使用 view，scroll-view，swiper，swiper-item，text，rich-text，button，image

view组件就类似于html中的div标签 list.wxml list.wxss scroll-view组件就是滚动的视窗，使用scroll-view组件时，要想横向滚动或者纵向滚动时，需要在scroll-view组件上添加对应的属性 scroll-x 或 scroll-y,然后需要注意的是，纵向滚动需要给scroll-view组件限定高度，横向滚动则需要给scroll-vi

2024年02月15日
浏览(159)
微信小程序 | 小程序开发

🖥️ 微信小程序专栏：小程序开发初级知识 🧑‍💼 个人简介：一个不甘平庸的平凡人🍬 ✨ 个人主页：CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录一、认识小程序开发什么是小程序? 各个平台小

2024年01月24日
浏览(64)
微信小程序在调用swiper组件时如果出现[渲染层错误] Uncaught TypeError: Cannot read property ‘$$‘ of undefined

报错：TypeError: Cannot read property ‘$$’ of undefined 还需设置current = 0，并且current和swiperList不能在一个this.setData中设置，要先setData swiperList 然后在setData current

2024年02月13日
浏览(62)
【微信小程序开发】第 7 课 - 小程序的常用组件

欢迎来到博主 Apeiron 的博客，祝您旅程愉快！时止则止，时行则行。动静不失其时，其道光明。目录 1、缘起 2、小程序中组件的分类 3、常用的视图容器类组件 3.1、view 组件 3.2、scroll - view 组件 3.3、swiper 和 swiper-item 组件 3.4、text 组件的基本使用 3.5、

2024年02月12日
浏览(50)
微信小程序开发之微信小程序交互

目录一、小程序交互前端： 1、先在登陆界面中编写代码 2、在前端中编写js代码后端： 1、先导入依赖： 2、定义好配置文件 3、编写好实体类 4、将帮助类进行配置 5、编写mapper类 6、定义service层以及对应的

2024年02月09日
浏览(59)
微信小程序 -- 小程序开发能力与拓展

1. 获取用户头像当小程序需要让用户完善个人资料时，我们可以通过微信提供的头像、昵称填写能力快速完善。如图：想使用微信提供的头像填写能力，需要两步：将 button 组件 open-type 的值设置为 chooseAvatar 当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调

2024年04月15日
浏览(64)