uni-app列表组件封装

uni-app列表组件封装

1.渲染数据-index.vue

<script>
    export default {
        data() {
            return {
                //1.渲染数据
                list:[
                    {
                    userpic:"../../static/demo/userpic/2.jpg",
                    username:"鲁大师",
                    isguanzhu:false,
                    title:"走出去，才发现你跟比人查的不是一点半点",
                    type:"img", //img:图文，video：视频
                    titlepic:"../../static/demo/datapic/1.jpg",
                    infomsg:{
                        index:2, //0:默认,1:顶，2:踩
                        ding:11,
                        cai:12
                    },
                    commentnum:10,
                    sharenum:10
                },
                {
                    userpic:"../../static/demo/userpic/3.jpg",
                    username:"大宝贝",
                    isguanzhu:true,
                    title:"走出去，才发现你跟比人查的不是一点半点",
                    type:"video", //img:图文，video：视频
                    titlepic:"../../static/demo/datapic/2.jpg",
                    play:"20w",
                    long:"2:47",
                    infomsg:{
                        index:1, //0:默认,1:顶，2:踩
                        ding:11,
                        cai:12
                    },
                    commentnum:10,
                    sharenum:10
                }
                
                ]
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

2.块级数据 view

<template>
    <view >
        
        
    <view class="index-list">
        <block v-for="(item,index) in list" :key="index">
            <view class="view-list1">
                <view class="left">
                    <image :src="item.userpic" mode=""></image>{{item.username}}
                </view>
                <view class="right" v-show="item.isguanzhu">
                    <view class="icon iconfont icon-zengjia">关注</view>
                </view>
            </view>
            <view class="view-list2">
            {{item.title}}
            </view>
            <view class="view-list3">
            <image :src="item.titlepic" lazy-load mode="widthFix"></image>
                <template v-if="item.type=='video'"> 
                    <view class="icon iconfont icon-bofang index-play"></view>
                    <view class="index-playInfo">{{item.play}} 次播放 {{item.long}}</view>
                </template>
                
            </view>
            <view class="view-list4">
                <view class="infomsg">
                    <view class="left " :class="{'active': (item.infomsg.index==1)}">
                        <view class="icon iconfont icon-icon_xiaolian-mian">{{item.infomsg.ding}}</view>
                    </view>
                    <view class="left" :class="{'active': (item.infomsg.index==2)}">
                        <view class="icon iconfont icon-kulian">{{item.infomsg.cai}}</view>
                    </view>
                    
                </view>
            
            
            <view class="right">
                <view class="icon iconfont icon-xiaoxi">{{item.commentnum}}</view>
                <view class="icon iconfont icon-zhuanfa">{{item.sharenum}}</view>
            </view>
            </view>
                
                <view class="view-line"></view>
            
        </block>
        
            
    </view>


    </view>
</template>

3.在components里创建一个组件文件夹

 

4.把view块级（block）数据贴到 components 里面的 index 下的 index-list.vue 里

5.把 index.vue里面的css 贴到 components 里面的 index 下的 index-list.vue 里

6.在index-list.vue script 里 

<script>
    export default {
        props:{
            //item就是上面循环的值，可以设置其他名字
            item:Object
        },
        methods: {
            
        }
    }
</script>

7.在index.vue里面 script  引入组件，并且接收数据

<script>
    //7.引入组件,选择第3个,from 后面选择组件库  ,前面命名下组件列表（index-list ），要用驼峰命名，不能有‘ - ’，分号结尾 
    import indexList from "@/components/index/index-list.vue";
    export default {
        
        //7.1 把数据接收过来。
        components:{
            indexList:indexList
        },
        data() {
            return {
                //1.渲染数据
                list:[
                    {
                    userpic:"../../static/demo/userpic/2.jpg",
                    username:"鲁大师",
                    isguanzhu:false,
                    title:"走出去，才发现你跟比人查的不是一点半点",
                    type:"img", //img:图文，video：视频
                    titlepic:"../../static/demo/datapic/1.jpg",
                    infomsg:{
                        index:2, //0:默认,1:顶，2:踩
                        ding:11,
                        cai:12
                    },
                    commentnum:10,
                    sharenum:10
                },
                {
                    userpic:"../../static/demo/userpic/3.jpg",
                    username:"大宝贝",
                    isguanzhu:true,
                    title:"走出去，才发现你跟比人查的不是一点半点",
                    type:"video", //img:图文，video：视频
                    titlepic:"../../static/demo/datapic/2.jpg",
                    play:"20w",
                    long:"2:47",
                    infomsg:{
                        index:1, //0:默认,1:顶，2:踩
                        ding:11,
                        cai:12
                    },
                    commentnum:10,
                    sharenum:10
                }
                
                ]
            }
        },
        onLoad() {

        },
        methods: {

        }
    }
</script>

8.在index。vue 里面 调用view

<template>
    <view >
        
            <block v-for="(item,index) in list" :key="index">
                <!--此时的index-list 就是index-list 里面的 class最外层 -->
                <index-list :item="item" :index="index"></index-list>
            </block>
        
    </view>
</template>

9.index-list.vue script 里 加index

<script>
    export default {
        props:{
            //item就是上面循环的值，可以设置其他名字
            item:Object,
            //9.index 也传个值
            index:Number
        },
        methods: {
            
        }
    }
</script>

 10.为了防止多个组件冲突， 在index-list.vue css  加scoped，只允许当前文件使用样式。