更新记录

1.0.4（2026-08-28） 下载此版本

修改文档

1.0.3（2026-08-28） 下载此版本

更改文档

1.0.2（2026-08-28） 下载此版本

优化插槽

平台兼容性

uni-app(4.75)

uni-app x(4.75)

sunrains-arrow-view

参数说明

<template>
    <view class="content" :style="contentStyle">
        <text class="item-text" :style="textStyle">{{ label }}</text>
        <view class="slot-box">
            <slot></slot>
        </view>
        <view class="right_arrow" :style="arrowStyle"></view>

    </view>
</template>

uniappx 使用示例

<template>
    <view class="content">
        <scroll-view direction="vertical" class="mine-page" show-scrollbar="false">
            <view class="tabbar">
                <navigator class="tabbar-item" url="/pages/setTheme/index">
                    <ArrowView label="去设置主题" height="100%" background="#e1b459" text-font-size="40rpx"
                        text-color="#0c0504" font-weight="bold" arrow-size="10px" arrow-color="#e0532f"
                        arrow-border-width="1.5px" />
                </navigator>
            </view>
            <view class="tabbar">
                <view class="tabbar-item">
                    <ArrowView background="#e1b459" text-font-size="40rpx" text-color="#0c0504" font-weight="bold"
                        arrow-size="10px" arrow-color="#e0532f" arrow-border-width="1.5px">
                        <template #default>
                            <navigator style="width:100%;padding-left:5px;margin-right: 10px;" url="/pages/sunrainsplugin/sunrainsplugin">
                                <text style="font-size: 25px;color: blue;">sunrains*插件</text>
                            </navigator>
                        </template>
                    </ArrowView>
                </view>

            </view>
            <view class="tabbar">
                <view class="tabbar-item">
                    <ArrowView background="#e1b459" text-font-size="40rpx" text-color="#0c0504" font-weight="bold"
                        arrow-size="10px" arrow-color="#e0532f" arrow-border-width="1.5px">
                        <template #default>
                        <uni-link style="width:100%;padding-left:5px;margin-right: 10px;font-size: 20px;color: red;"
                            blankFallback="copy-link-modal" href="https://ha.sunrains.top/#/mineapp"
                            target="_blank">访问官网
                        </uni-link>
                        </template>
                    </ArrowView>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="uts">
    import ArrowView from "@/uni_modules/sunrains-arrow-view/components/sunrains-arrow-view/sunrains-arrow-view.uvue"

</script>

<style scoped lang="scss">
    .content {
        width: 100%;
        height: 100%;
    }

    .mine-page {
        height: 99.5%;
        border-radius: 5px;
        padding: 5px 5px 0 5px;
        margin: 1px;
    }

    .tabbar {
        width: 100%;
        display: flex;
        flex-direction: column;

        .tabbar-item {
            background: rgba(235, 215, 189, 0.8);
            margin: 10px 0;
            border-radius: 10px;
        }
    }
</style>

uniapp 使用示例

<template>
    <view class="content">
        <scroll-view direction="vertical" class="mine-page" show-scrollbar="false">
            <navigator class="menu-item" url="/pages/setTheme/index">
                <ArrowView
                    label="去设置主题"
                    width="100%"
                    background="#e1b459"
                    text-font-size="40rpx"
                    text-color="#0c0504"
                    font-weight="bold"
                    arrow-size="10px"
                    arrow-color="#e0532f"
                    arrow-border-width="1.5px"
                />
            </navigator>

            <view class="menu-item">
                <ArrowView
                    background="#e1b459"
                    text-font-size="40rpx"
                    text-color="#0c0504"
                    font-weight="bold"
                    arrow-size="10px"
                    arrow-color="#0c0a23"
                    arrow-border-width="1.5px">
                    <template #default>
                        <navigator style="width:100%;margin-right: 10px;"
                            url="/pages/sunrainsplugin/sunrainsplugin">
                            <text style="font-size: 25px;color: blue;">uniappx 之 sunrains-* 插件uniappx 之 sunrains-* 插件sunrains*插件uniappx 之 sunrains-* 插件uniappx 之 sunrains-* 插件</text>
                        </navigator>
                    </template>
                </ArrowView>
            </view>

            <view class="menu-item">
                <ArrowView
                    width="100%"
                    background="#e1b459"
                    text-font-size="40rpx"
                    text-color="#0c0504"
                    font-weight="bold"
                    arrow-size="10px"
                    arrow-color="#e0532f"
                    arrow-border-width="1.5px">
                    <template #default>
                        <uni-link style="width:100%;padding-left:5px;margin-right: 10px;font-size: 20px;color: red;"
                            blankFallback="copy-link-modal" href="https://ha.sunrains.top/#/mineapp"
                            target="_blank">访问官网
                        </uni-link>
                    </template>
                </ArrowView>
            </view>
        </scroll-view>
    </view>
</template>

<script setup lang="ts">
    import ArrowView from "@/uni_modules/sunrains-arrow-view/components/sunrains-arrow-view/sunrains-arrow-view.vue"
</script>

<style scoped lang="scss">
.content {
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.mine-page {
    border: 1px solid red;
    border-radius: 5px;
    box-sizing: border-box;
}

.menu-item {
    width: 100%;
    margin: 20rpx 0;
    border-radius: 10rpx;
    box-sizing: border-box;
}
</style>

示例效果