更新记录

1.0.7(2020-04-10) 下载此版本

1、static,添加固定高度切换

1.0.6(2020-04-10) 下载此版本

1、优化tabs样式 2、优化static类型时的切换(使用子组件,回到顶部、简化样式)

1.0.5(2020-04-08) 下载此版本

优化prop

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
× × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×

pyh-pageSwiper 页面切换组件

页面切换组件,组件名:pageSwiper,代码块: pageSwiper。

使用方式:

script 中引用组件

单页面引用
import pageSwiper from "@/components/pyh-pageSwiper/pyh-pageSwiper.vue"
import pageSwiperItem from '@/components/pyh-pageSwiper/pyh-pageSwiper-item.vue'
export default {
    components: {pageSwiper,pageSwiperItem}
}

template 中使用组件

<pageSwiper ref="pageSwiper" :dataLength="data.length" :initIndex="index" @swiperChange="swiperChange" height="500px">
    <view>{{'显示的内容'}}</view>
</pageSwiper>
或
<pageSwiper ref="pageSwiper" :dataLength="data.length" :initIndex="index" @swiperChange="swiperChange" swiperType="static" height="500px">
    <pageSwiperItem :pageIndex='pageIndex' height="500px" :index="index" v-for="(item,pageIndex) in data" :key="pageIndex">
        <view>{{item}}</view>
    </pageSwiperItem>
</pageSwiper>

script 说明 可自定义(需要修改组件内对应参数名)

pageSwiper 属性说明:

属性名 类型 默认值 说明
dataLength Number 0 数据长度
initIndex Number 0 初始下标
swiperType String 'lite' swiper类型('lite'、'static')
duration Number 200 动画事件(单位ms)
height String '' 滚动容器固定高度

pageSwiperItem 属性说明:

属性名 类型 默认值 说明
pageIndex Number 0 下标
index Number 0 当前swiper下标
height String 0px 滚动容器固定高度

swiperTo 事件说明:

跳转至指定下标

swiperChange 事件说明:

返回下标

up 事件说明:

单项滚动到底部,返回下标(只在static模式下有效)

感谢:

有更多优化建议和需求,请联系作者。谢谢!

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问