更新记录

1.0.0（2024-12-16） 下载此版本

发布插件

平台兼容性

iliya-desgin

一个包含炫酷动效的导航按钮和轮播图指示器的组件库，目前仅测试了vue2和微信小程序，其余平台未测试，理论上应该都可以用。

效果展示

粘性定位展示

固定定位展示

代码示例

默认动态定位使用示例

<template>
    <view class="content">
        <view style="height: 100vh;background: green;">
            <view class="tip">向下滚动</view>
        </view>
        <view class="box1">
            <!-- 导航按钮 -->
            <iliya-nav-button text="进一步了解" :imgUrl="imgUrl" parent=".box1" scrollDom=".content" :topHideOffset="400"
                :bottom="100" :scroll="scroll" :font-size="32" @click="navClick"></iliya-nav-button>
        </view>
        <view class="box2">
            <swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :current="current"
                @change="swiperChange">
                <swiper-item>
                    <view class="swiper-item" style="background-color: red;">A</view>
                </swiper-item>
                <swiper-item>
                    <view class="swiper-item" style="background: blueviolet;">B</view>
                </swiper-item>
                <swiper-item>
                    <view class="swiper-item" style="background-color: green;">C</view>
                </swiper-item>
            </swiper>
            <!-- 轮播指示器 -->
            <iliya-indicator parent=".box2" scrollDom=".content" :swiper-number="3" :bottom="100" :topHideOffset="400"
                :scroll="scroll" :autoPlay.sync="autoplay" :current="current" :interval="interval"></iliya-indicator></iliya-indicator>
        </view>
        <view class="box3"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                imgUrl: '../../static/right.png',
                icon: 'iconfont icon-jiantou',
                scroll: {},
                interval: 3000,
                autoplay: true,
                current: 0
            }
        },
        onPageScroll(e) {
            this.scroll = e
        },
        methods: {
            swiperChange(e) {
                this.current = e.detail.current
            },
            navClick() {
                uni.showToast({
                    title: '点击按钮'
                })
            }
        }
    }
</script>

<style>
    .tip {
        text-align: center;
        font-size: 52rpx;
        color: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%);
    }

    .box1 {
        height: 100vh;
        display: flex;
        justify-content: center;
        background: orangered;
        position: relative;
    }

    .box2 {
        height: 50vh;
        background: skyblue;
        position: relative;
        padding-top: 200rpx;
    }

    .box3 {
        height: 100vh;
        background: yellowgreen;
    }

    .swiper {
        height: 300rpx;
    }

    .swiper-item {
        display: block;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
    }

    .swiper-list {
        margin-top: 40rpx;
        margin-bottom: 0;
    }
</style>

固定定位使用示例

<template>
    <swiper vertical style="height: 100vh;" :current="pageIndex" @change="pageChange">
        <swiper-item>
            <view style="height: 100%;background-color: aqua;">
                <!-- 固定定位时使用一个元素包裹并在这个元素上写定位样式 -->
                <view style="bottom: 600rpx;position: absolute;width: 100%;">
                    <iliya-nav-button ref="navBtn" text="进一步了解" :icon="icon" fixed :font-size="32"
                        @click="navClick"></iliya-nav-button>
                </view>
            </view>
        </swiper-item>
        <swiper-item>
            <view style="height: 100%;background-color: greenyellow;">
                <swiper class="swiper" circular :autoplay="autoplay" :interval="interval" :current="current"
                    @change="swiperChange">
                    <swiper-item>
                        <view class="swiper-item" style="background-color: red;">A</view>
                    </swiper-item>
                    <swiper-item>
                        <view class="swiper-item" style="background: blueviolet;">B</view>
                    </swiper-item>
                    <swiper-item>
                        <view class="swiper-item" style="background-color: green;">C</view>
                    </swiper-item>
                </swiper>
                <view style="bottom: 600rpx;position: absolute;width: 100%;">
                        <iliya-indicator ref="indicator" :swiper-number="3"  :autoPlay.sync="autoplay" :current="current"
                        :interval="interval"></iliya-indicator>
                </view>
            </view>
        </swiper-item>
    </swiper>
</template>

<script>
    export default {
        data() {
            return {
                icon: 'iconfont icon-jiantou',
                pageIndex: 0,
                interval: 3000,
                autoplay: true,
                current: 0
            }
        },
        mounted() {
            this.$refs.navBtn.play()
        },
        methods: {
            pageChange(e) {
                this.pageIndex = e.detail.current
                //加上延迟防止快速切换时无法显示按钮
                if (this.pageIndex === 0) {
                    setTimeout(() => {
                        this.$refs.navBtn.play()
                        this.$refs.indicator.hide()
                    }, 500)
                } else {
                    setTimeout(() => {
                        this.$refs.navBtn.hide()
                        this.$refs.indicator.play()
                    }, 500)
                }
            },
            swiperChange(e) {
                this.current = e.detail.current
            },
        }
    }
</script>

<style>
    .swiper {
        height: 300rpx;
    }

    .swiper-item {
        display: block;
        height: 300rpx;
        line-height: 300rpx;
        text-align: center;
    }

    .swiper-list {
        margin-top: 40rpx;
        margin-bottom: 0;
    }
</style>

通用props

通用方法

@play显示按钮（非固定定位不建议手动调用）

this.$refs.refName.play()

@hide隐藏按钮（非固定定位不建议手动调用）

this.$refs.refName.hide()

导航按钮私有Props

具有炫酷动效的导航按钮，帮助你构建更华丽的页面

@click点击事件

    <iliya-nav-button ..... @click="navClick"></iliya-nav-button>

navClick() {
   uni.showToast({
     title: '点击按钮'
      })
  } 

指示器私有Props

以下属性都为必传，否则指示器将无法正常工作