微信小程序开发02-设置自动滚动轮播图片
2023-09-11 14:19:16 时间
设置自动滚动图片首先在xx.xml中:
<swiper class="banner" indicator-dots indicator-color="rgba(255,255,255,0.5)" indicator-active-color="#fff" autoplay interval="3000" circular>
<swiper-item>
<image src="../../image/h14.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="../../image/h2.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="../../image/h3.jpg" mode="widthFix"></image>
</swiper-item>
</swiper>
在.wxss中对其进行样式渲染(具体大小等,可以对参数稍做更改):
.banner{height: 400rpx; border: red 1px solid;}
.banner image{height: 400rpx; width: 100%;}
.srcOut{display: flex; flex-wrap: nowrap; text-align: center;}
.srcBox{ width: 100px; height: 100px; background-color: gold; margin: 2px; flex:0 0 100px}
.srcOut .txt{font-size: 35rpx; color: #FF69B4; background-color: #FFF8DC;}
.srcOut2{ height: 100%;
}
.srcBox2{width: 100%; height: 100px; background-color: hotpink; margin-bottom: 1px;}
.out{padding: 30rpx;box-sizing: border-box ;}
.row{display: flex;height: 150rpx;margin-bottom: 20rpx;}
.pic{flex: 2;}
.pic image{width: 100%; height: 100%;}
.text{flex: 8; border-bottom: solid 1px #eee;padding-left: 10rpx; display: flex; flex-direction: column;justify-content: space-between;}
.text .title{font-size: 38rpx;}
.text .time{ color: #999;}
.footer{padding: 40rpx 0; background: #f2f2f2; text-align: center;}
.footer .pic{width: 60rpx;}
.footer .text{font-size: 25rpx; color: #999;}
功能描述
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
属性说明
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 | |
---|---|---|---|---|---|---|
indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 | |
indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 | |
indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 | |
autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 | |
current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 | |
interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 | |
duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 | |
circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 | |
vertical | boolean | false | 否 | 滑动方向是否为纵向 | 1.0.0 | |
previous-margin | string | "0px" | 否 | 前边距,可用于露出前一项的一小部分,接受 px 和 rpx 值 | 1.9.0 | |
next-margin | string | "0px" | 否 | 后边距,可用于露出后一项的一小部分,接受 px 和 rpx 值 | 1.9.0 | |
snap-to-edge | boolean | false | 否 | 当 swiper-item 的个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 的时候,可以指定这个边距是否应用到第一个、最后一个元素 | 2.12.1 | |
display-multiple-items | number | 1 | 否 | 同时显示的滑块数量 | 1.9.0 | |
easing-function | string | "default" | 否 | 指定 swiper 切换缓动动画类型 | 2.6.5 |
相关文章
- 微信小程序 - 更改radio和checkbox选中样式
- 用Python实现自动抢红包以及查看微信撤回消息
- 微信小程序轮子 - 列表拖曳排序轮子(用户拖动并放手完成排序)
- 微信小程序 - 页面触底 onReachBottom() 懒加载自动计算分页、检查是否已经请求完全部数据、自动请求接口合并数据(高效自动判断分页懒加载是否继续请求接口数据,超详细触底请求后端示例教程)
- 微信公众平台 - 微信内置浏览器 WeixinJSBridge.invoke(‘xxx‘) API 报错:system:access_denied(常见于微信支付、分享朋友圈/转发好友等功能)解决方案
- 微信小游戏
- 解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的
- 手把手教你实现一个微信自动回复机器人
- 基于微信PC端小程序抓包方法
- Python+ITchart实现微信机器人对指定的朋友和群自动回复
- 用c#开发微信 (17) 微活动 3 投票活动 (文本投票)
- 微信小程序使用本地图片在真机不显示的问题
- 微信小程序springboot在线考试系统小程序+后台管理系统 | 计算机毕业设计
- 如何在微信小程序中集成认证服务—手机号码篇
- 微信小程序: 按说明的方法在app.wxss中引入 weui.wxss 提示找不到文件的解决方法
- 分享微信及朋友圈(基于友盟)
- atitit. access token是什么??微信平台公众号开发access_token and Web session保持状态机制