uniapp diy自由布局

diy自由布局

通过接口返回的diyConfig进行展示不同的模块

<template>
    <view class="home">
        <view class="home-content">
            <view class="home-search flex-align" v-if="diyConfig.showSearch">
                <text class="iconfont-theme icon-search mr-3"></text>
                <input maxlength="50" v-model="searchText" confirm-type="search" @confirm="search()"
                    :placeholder="richText.search" />
            </view>
            <view class="home-banner" :style="{height:bgHeight}" v-if="diyConfig.showBanner">
                <diy-banners :banner="bannerList" :bgHeight="bgHeight"></diy-banners>
            </view>
            <view class="dynamic flex-align" v-if="diyConfig.showNotice">
                <view class="dynamic-title">
                    {{richText.notice_title}}
                </view>
                <view class="dynamic-text">
                    {{richText.notice_content}}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import diyBanners from 'components/diy-components/diy-banners.vue';
    export default {
        components: {
            diyBanners
        },
        data() {
            return {
                searchText: '',
                diyConfig: {
                    showSearch: true,
                    showBanner: true,
                    showNotice: true
                },
                richText: {},
                bgHeight: '250rpx'
            };
        },
        onShow() {
            this.getRichText()
        },
        methods: {
            async getRichText() {
                // 通过接口获取动态文案
                 this.richText={xxx:'xxx'} 
                // 获取失败则用本地文案
                this.richText = text || this.$text['home']
            }
        }
    }
</script>

将自由布局的组件存放在components下的diy-components目录

<template>
    <view>
        <swiper class="home-banner" :style="{height:bgHeight}" :autoplay="true" circular indicator-color="#fff" indicator-active-color="#fff" :indicator-dots="banner.length>1"  :current="current" @change="bannerChange">
            <swiper-item :style="{height:bgHeight}" v-for="(item,index) in banner" :key="index">
                <image class="bg" :src="item.src" >
                </image>
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    export default {
        props: {
            banner: {
                type: Array,
                default: []
            },
            mode: {
                type: String,
                default: 'multiple'
            },
            bgHeight: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                current: 0,
            };
        },
        methods: {
            swiperChange() {
                this.isChange = true;
            },
            bannerChange(e) {
                // this.indexChange(e.detail.current)
            },
        }
    }
</script>

<style lang="scss">
    .home-banner {
        height: 100%;

        // ::v-deep .uni-swiper-dots {
        // 	width: 100%;
        // 	height: 10rpx;
        // 	padding-right: 60rpx;
        // }

        // ::v-deep .uni-swiper-dots-horizontal {
        // 	top: 80rpx !important;
        // 	text-align: right;
        // 	right: 80rpx !important;
        // }

        ::v-deep .uni-swiper-dot {
            width: 15rpx;
            height: 15rpx;
            margin-right: 10rpx;
        }

        ::v-deep .uni-swiper-dot-active {
            width: 15rpx;
            height: 15rpx;
            background: $theme-color !important;
            border-radius: 8rpx;
        }
    }

    image {
        width: 100%;
        height: 100%;
    }

</style>

可配置文案

localText.json

{
    "home": {
        "search": "搜索",
        "notice_title": "通知动态",
        "notice_content": "文案文案文案文案文案文案文案文案文案..."
    }
}

main.js

import localText from 'static/localText.json'

Vue.prototype.$text = localText;

效果图：

 diyConfig: {
    showSearch: true,
    showBanner: true,
    showNotice: true
}

 diyConfig: {
    showSearch: false,
    showBanner: true,
    showNotice: true
}

 diyConfig: {
    showSearch: true,
    showBanner: false,
    showNotice: true
}

 diyConfig: {
    showSearch: true,
    showBanner: true,
    showNotice: false
}