前沿

每一个干过前端的小伙伴基本上都有一套自己的组件库，样式库，以来提高开发效率，之前小编也总结过自己的一套样式库，（详情请移步前端开发公共css，js笔记）现在自从学了多终端开发后，随着习惯，也建立了一套自己的多终端组件库。

该库会不断更新，毕竟学无止境吗
以下组件需要配合公共的css来使用uniBase.css

Step一,我的页面，设置之类的,效果图如下

config.png

此公共组件实现的效果

内容为动态传入
每个item之间的间隙也是动态传入
可以灵活配置是否显示图片，以及右侧有无文字
受uni-app的限制，icon以及img需要使用网络地址

在components下新建一个文件夹cellList，里边建一个index.vue

<template>
    <view>
        <!-- hover-class  指定效果  按下去的样式背景色什么的 -->
        <view class="viewCellList W100" hover-class="uni-list-cell-hover" v-for="(value,key) in uniList" :key="key"
         v-bind:style="{marginTop:value.Mtop}" @click="listTag(value)">
            <view class="uniListLeft">
                <view class="listIcon" v-if="value.img != undefined">
                    <image class="Bai100" :src="value.img"></image>
                </view>
                <view class="listName F14">
                    {{value.content}}
                </view>
            </view>
            <view class="uniListRight Centered">
                 <text class="F14 grayE" v-if="value.RightText != undefined">{{value.RightText}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: ["uniList"],
        data() {
            return {

            };
        },
        methods: {
            listTag(value) {
                this.$emit("jumpList",value)
            }
        }
    }
</script>

<style>
    .viewCellList {
        height: 108upx;
        border-bottom: 1px solid #EEEEEE;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        padding: 0 10upx 0 32upx;
        background: #FFFFFF;
    }

    .uniListLeft {
        flex: 1;
        display: flex;
        align-items: center;
    }

    .uniListRight {
        height: 100%;
    }

    .uniListRight::after {
        font-family: uniicons;
        content: '\e583';
        color: #bbb;
        font-size: 48upx;
    }

    .listIcon {
        width: 70upx;
        height: 70upx;
        margin-right: 20upx;
    }

    .listName {
        display: flex;
        align-items: center;
    }

    .uni-list-cell-hover {
        background-color: #eee;
    }
    .grayE{
        color: #999;
    }
</style>

在使用页面

<template>
<view>
     <!-- 订单部分 -->
     <cellList :uniList="uniList" v-on:jumpList="jumpListTag"></cellList>
</view>
</template>
<script>
    import cellList from "../../components/cellList/index.vue"
    import uniIcon from '../../components/uniIcon/index.vue'
    export default {
        components: {
            cellList,
            uniIcon
        },
        data() {
            return {
                showImg: false,
                uniList: [{
                        Mtop: uni.upx2px('30') + 'px',
                        content: "会员中心",
                        img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
                    },
                    {
                        Mtop: uni.upx2px('0') + 'px',
                        content: "我的优惠",
                        img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
                    },
                    {
                        Mtop: uni.upx2px('20') + 'px',
                        content: "服务中心",
                        img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
                    },
                    {
                        Mtop: uni.upx2px('0') + 'px',
                        content: "小米之家",
                        img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
                    },
                    {
                        Mtop: uni.upx2px('20') + 'px',
                        content: "F码通道",
                        img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
                    },
{
                        Mtop: uni.upx2px('20') + 'px',
                        content: "设置",
                        RightText:"昵称",   //设置就有，不设置就无，img也是
                        img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
                    }
                ]
            };
        },
        onLoad() {
            setTimeout(() => {
                this.showImg = true;
            }, 400)
        },
        computed:{
        },
        methods:{
            jumpListTag(){
                console.log("erwtyu");
            },
        }
    }
</script>