更新记录

1.0.0（2021-12-17）

无

平台兼容性

lxm-tabssolt-drags是一个前端网页框架模板，一般用来做发布类首页和框架。

框架主要内容：选项卡搜索框吸顶+选项卡搜索框插槽+搜索框添加背景图背景色+搜索框跳转搜索页面+拖拽菜单拖拽排序+单元格发布页面

使用的工具和技术：使用uView2的UI工具和技术，支持nvue页面。还引用了几个开源组件。

SJ-LotteryDraw组件参数说明

| 属性都是可以根据自己需求修改

grid_info_arr详情

    <view>
        <view class="zy-column">
            <view class="zy-grid" style="">
                <uni-grid :column="4" :square="false" :showBorder="false" :highlight="false">
                    <uni-grid-item v-for="(item,index) in listUrl"  :key="index">
                        <view class="grid-item-box1" @click="navTo(item.url)">
                            <view class="zy-row item-img">
                                <zywork-icon v-if="item.type" :type="item.type" :color="item.color"
                                    :sizeRpx="item.size" />
                                <image v-else :src="item.imgUrl" mode=""></image>
                            </view>
                            <text class="text">{{item.title}}</text>
                        </view>
                    </uni-grid-item>
                </uni-grid>
            </view>
        </view>
    </view>
</template>
<script>
    import zyworkIcon from '@/components/zywork-icon/zywork-icon.vue'
    import uniGrid from "@/components/uni-grid/uni-grid.vue"
    import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
    export default {
        components: {
            zyworkIcon,
            uniGrid,
            uniGridItem
        },
        data() {
            return {
                listUrl: [],
                wid:1
            };
        },
        onShow() {

            if (uni.getStorageSync("wid_"+this.wid+'iconList')) {
                this.listUrl = uni.getStorageSync("wid_"+this.wid+'iconList');
                this.listUrl.push({
                    title: "设置",
                    type: "icondian",
                    url: "icon-set/icon-set",
                    color: "#a5a5a5",
                    size: "60"
                })
            } else {
                this.initGrid();
            }

        },
        onLoad() {

        },
        methods: {
            initGrid(){
                this.listUrl.push({
                    title: "测试",
                    type: "iconshoujihaoma",
                    url: "icon-set/icon-set",
                    color: "#a5a5a5",
                    size: "60"
                })
                this.listUrl.push({
                    title: "测试1",
                    imgUrl: "/static/images/img_fra1_1.png",
                    url: "/pages/index/index",
                })
                this.listUrl.push({
                    title: "设置",
                    type: "icondian",
                    url: "icon-set/icon-set",
                    color: "#a5a5a5",
                    size: "60"
                })
            },
            /**
             * 统一跳转接口,拦截未登录路由
             * navigator标签现在默认没有转场动画，所以用view
             */
            navTo(url) {
                uni.navigateTo({
                    url:url
                })
            }
        }
    }
</script>

<style lang="scss">
    page {
        width: 100%;
        background-color: #F5F5F5;
        height: 100%;
    }

    .zy-row {
        display: flex;
        flex-direction: row;
    }

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

    .zy-grid {
        width: 100%;
        padding-bottom: 100rpx;
        margin-top: 10rpx;
        /* #ifndef APP-NVUE */
        display: block;

        /* #endif */
        .grid-item-box1 {
            width: 100%;
            padding: 20rpx 0rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .item-img {
                background-color: #FFFFFF;
                border-radius: 50%;
                width: 100rpx;
                height: 100rpx;
                align-items: center;
                justify-content: center;
            }

            image {
                width: 60rpx;
                height: 60rpx;
            }

            text {
                padding: 0rpx 10rpx;
                word-break: break-all;
                margin-top: 20rpx;
                color: $info-text-color;
                font-size: $font-base;
            }
        }

    }
</style>

传奇开心果模板lxm-tabssolt-dragsV1.0.0传奇开心果出品2021.12.17