更新记录

1.0.3（2023-05-06）

• 完善布局

1.0.2（2022-04-18）

• 修复布局bug

1.0.0（2020-12-14）

新增sn-shadow-view容器组件（同view级别）

平台兼容性

原生插件通用使用流程：

1. 购买插件，选择该插件绑定的项目。
2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

使用文档 （更多插件及问题，请加微信：zhuzheVIP1）

说明

此插件提供了 sn-shadow-view 组件，仅 nvue 使用

属性

使用

<template>
    <view>
        <!-- hidden: {
            left: true,
            top: true,
            bottom: false,
            right: true
        } -->
        <!-- cornerRadius: {
            leftTop: 0,
            rightTop: 0,
            leftBottom: 20,
            rightBottom: 20
        } -->
        <sn-shadow-view v-if="isAndroid" color="rgba(123,123,124,.5)" class="shadow" limit="20" offsetX="10" offsetY="0"
            :cornerRadius="{
                leftTop: 20,
                rightTop: 20,
                leftBottom: 20,
                rightBottom: 20
            }" @click="test">
            <!-- 一定要加这个view，并且设置padding-right: 40rpx;padding-bottom: 28rpx;（由于目前无法完全自适应padding） -->
            <view v-if="isShow" class="shadow_inner">
                <view style="flex-direction: row;">
                    <text style="background-color: red;">123</text>
                    <view><text>222</text></view>
                    <view><text>222</text></view>
                </view>
                <image src="/static/logo.png" mode="widthFix" style="width: 20rpx;"></image>
                <image src="/static/logo.png" mode="widthFix" style="width: 30rpx;"></image>
                <image src="/static/logo.png" mode="widthFix" style="width: 40rpx;"></image>
                <image src="/static/logo.png" mode="widthFix" style="width: 50rpx;"></image>
            </view>
        </sn-shadow-view>
        <!-- <sn-loading :loading="isShow" :style="`height:${isShow ? '50rpx' : '0'};`" color="red" style="width: 100rpx;" /> -->
        <!-- <sn-circle-loading color="gray" style="width: 100rpx; height: 100rpx;" /> -->
        <button type="default" @click="toggle">toggle</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                isShow: true,
                isAndroid: uni.getSystemInfoSync().platform == 'android'
            };
        },
        methods: {
            toggle() {
                this.isShow = !this.isShow;
            },
            test() {
                uni.showToast({
                    icon: 'none',
                    title: 'test'
                })
            }
        }
    };
</script>

<style>
    .shadow {
        width: 700rpx;
        background-color: #eff8ff;
    }

    .shadow_inner {
        padding-right: 40rpx; 
        padding-bottom: 28rpx;
        flex-direction: column;
        background-color: antiquewhite;
        /* align-items: flex-end; */
    }
</style>