更新记录
1.0.1(2019-12-11)
1.优化插件使用时的数据;
2.合并重复功能的style计算为class。
1.0.0(2019-12-06)
1.Component completed!
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
使用说明
属 性 名 |
类 型 |
说 明 |
bannerList |
Array |
主数据(保证至少有三项) |
swiperConfig |
Object |
swiper配置数据,同swiper组件,其中previousMargin与nextMargin默认为'58rpx' |
scaleX |
String |
X轴缩放,即当前项与常规项的宽度比例(默认:(634 / 550).toFixed(4),1.1527) |
scaleY |
String |
Y轴缩放,即当前项与常规项的高度比例(默认:(378 / 328).toFixed(4),1.1524) |
<special-banner :banner-list="bannerList" :swiper-config="swiperConfig"></special-banner>
data() {
return {
bannerList: [{
picture: 'http://image.mishi.cn/r/yry_h5_test/detail/3_1535359279285.png',
title: '七夕将至:时光足够久,韧性也能炖出味',
description: '一万年太久,就现在,给你爱',
path: ''
}, {
picture: 'http://image.mishi.cn/r/yry_h5_test/detail/2_1535359240426.png',
title: '新菜上架:无边海洋,找到顺眼的那尾鱼',
description: '花中樱,鱼乃鲷花中樱,鱼乃鲷',
path: ''
}, {
picture: 'http://image.mishi.cn/r/yry_h5_test/detail/1_1535359204228.png',
title: '在湘西的烟火气里,发现苗族少女的神明',
description: '取材自湘西苗族传统的烟熏文化',
path: ''
}, {
picture: 'http://image.mishi.cn/r/yry_h5_test/detail/4_1535359327213.png',
title: '福利降临,陪伴独自行走的丰盛旅程',
description: '在自己的小世界里,日日好日,夜夜好清宵',
path: ''
}],
swiperConfig: {
indicatorDots: true,
indicatorColor: 'rgba(255, 255, 255, .4)',
indicatorActiveColor: 'rgba(255, 255, 255, 1)',
autoplay: false,
interval: 3000,
duration: 300,
circular: true,
previousMargin: '58rpx',
nextMargin: '58rpx'
}
}
}
tips
本版本并未提供具体的css值的适配,如果需要修改样式,可以在组件内部修改其style属性值,具体说明已经在组件内部标记出来