更新记录
1.0.4(2024-08-16)
下载此版本
1.优化:标题显示
1.0.3(2024-08-16)
下载此版本
1.新增:外边距:margin属性
2.新增:圆角:radius属性
1.0.2(2024-08-07)
下载此版本
1.优化:代码
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 3.1.0 |
√ |
√ |
√ |
√ |
√ |
√ |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
√ |
√ |
√ |
√ |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
√ |
云函数类插件通用教程
使用云函数类插件的前提是:使用HBuilderX 2.9+
star-banner
star-banner
组件,用于实现轮播图效果,支持点击跳转小程序内页面、跳转其他小程序、跳转网址、预览图片和观看视频。
示例代码
<template>
<view>
<star-banner :oData="oData" :category_id="category_id" :mode="mode" :dotsStyles="dotsStyles" :height="height"
:autoplay="autoplay" :circular="circular" :interval="interval" :duration="duration" :margin="margin"
:radius="radius"></star-banner>
</view>
</template>
<script>
export default {
data() {
return {
oData: [{
_id: '1',
bannerfile: {
url: 'https://picture.gptkong.com/20240805/213635a164e12d4b7a8baa8181a4b897cf.png'
},
title: '身无彩凤双飞翼,心有灵犀一点通'
},
{
_id: '2',
bannerfile: {
url: 'https://picture.gptkong.com/20240805/213635a164e12d4b7a8baa8181a4b897cf.png'
},
title: '昨夜星辰昨夜风,画楼西畔桂堂东'
}
],
category_id: 'club',
mode: 'default',
dotsStyles: {},
height: '240rpx',
autoplay: true,
circular: true,
interval: 1000,
duration: 500,
margin: '20rpx',
radius: '10rpx'
}
}
}
</script>
API
Props
名称 |
说明 |
类型 |
默认值 |
可选值 |
oData |
轮播图数据,见上方"示例代码"说明 |
Array |
- |
- |
category_id |
轮播图分类id(从数据库拉取该分类项的所有数据,oData如果传值,该属性无效) |
String |
- |
- |
mode |
轮播图指示点模式,nav模式显示标题 |
String |
default |
round/nav/indexes |
height |
轮播图组件高度,单位rpx |
String |
230rpx |
- |
autoplay |
是否自动播放 |
Boolean |
true |
false |
interval |
自动轮播时间间隔,单位ms |
Number |
2500 |
- |
duration |
切换一张轮播图所需的时间,单位ms |
Number |
500 |
- |
circular |
是否采用衔接滑动,即播放到末尾后重新回到开头 |
Boolean |
true |
false |
margin |
外边距 |
String |
0 |
- |
radius |
圆角 |
String |
10rpx |
- |
dotsStyles |
轮播图指示点样式 |
Object |
- |
- |
dotsStyles Options
名称 |
说明 |
类型 |
默认值 |
可选值 |
width |
指示点宽度 在 mode = nav、mode = indexes 时不生效 |
Number |
8 |
- |
bottom |
指示点距 swiper 底部的高度 |
Number |
10 |
- |
color |
指示点前景色,只在 mode = nav ,mode = indexes 时生效 |
Color |
'#fff' |
- |
backgroundColor |
未选择指示点背景色 |
Color |
'rgba(0, 0, 0, .3)' |
- |
border |
未选择指示点边框样式 |
Border |
'1px rgba(0, 0, 0, .3) solid' |
- |
selectedBackgroundColor |
已选择指示点背景色,在 mode = nav 时不生效 |
Color |
'#333' |
- |
selectedBorder |
已选择指示点边框样式,在 mode = nav 时不生效 |
Border |
'1px rgba(0, 0, 0, .9) solid' |
- |
意见反馈
相关文章