更新记录
1.0.6(2023-03-23) 下载此版本
changelog.md保持同步
1.0.5(2023-03-23) 下载此版本
changelog.md保持同步
1.0.4(2023-03-23) 下载此版本
changelog.md保持同步
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 3.3.12 app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
√ | √ | √ | √ | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
yy-swiper 组件
介绍
yy-swiper
组件是一个基于 uni-app
的自定义组件,用于监听用户的左右侧滑手势事件,可以在移动端实现类似轮播图等交互效果。
特点
- 高效稳定:基于 touch 事件实现,性能稳定。
- 易使用:简单易上手,支持自定义事件触发函数。
- 易修改:可根据具体需求进行自定义样式和功能。
- yy-swiper遵循easycom规范 (opens new window),无需注册即可使用。
API
Props
该组件没有 props。
Events
事件名 | 说明 | 回调参数 |
---|---|---|
swiperleft | 左滑事件 | 无 |
swiperright | 右滑事件 | 无 |
示例代码
<template>
<view>
<yy-swiper @swiperleft="onSwiperLeft" @swiperright="onSwiperRight">
<view class="item">Item 1</view>
<view class="item">Item 2</view>
<view class="item">Item 3</view>
</yy-swiper>
</view>
</template>
<script>
export default {
methods: {
onSwiperLeft() {
console.log('Swiper left')
},
onSwiperRight() {
console.log('Swiper right')
}
}
}
</script>
注意事项
- 由于该组件是基于
touch
事件实现的,因此仅适用于移动端。 - 在实际使用过程中,应根据不同的屏幕尺寸和设备特性进行测试和优化,以确保组件的稳定性和可靠性。