uniapp中easycom组件的封装

pages.json中配置easycom

在pages.json对象默认加入这段代码进行easycom配置

"easycom": { //组件化配置
		"autoscan": true, //是否开启自动扫描，开启后将会自动扫描符合components/组件名称/组件名称.vue目录结构的组件
		"custom": {
			// "uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
			"uni-(.*)": "@/components/uni-$1/uni-$1.vue", // 匹配components目录下组件名称/组件名称内的vue文件
			"vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
		}
	}

在components文件中新建index-list文件夹和文件

index-list子组件文件结构

export default {
    props:{
      item:Object,//传过来是一个对象的形式
      index:Number
    }
  }
<template>
  <view class="index-list">
    <view class="index-list1 u-f-ac u-f-jsb">
      <view class="u-f-ac">
        <image :src="item.userpic" mode="widthFix"></image>
        {{ item.username }}
      </view>
      <view class="u-f-ac" v-show="item.isguanzhu">
        <view class="u-f-ac icon iconfont icon-zengjia"></view>关注
      </view>
    </view>
    <view class="index-list2">{{ item.title }}</view>
    <view class="index-list3 u-f-ajc">
      <!-- 图片 -->
      <image :src="item.titlepic" mode="widthFix"></image>
      <!-- 视频 -->
      <template v-if="item.type=='video'">
        <view class="icon iconfont icon-bofang index-list-play"></view>
        <view class="index-list-playinfo">{{ item.playnum }}</view>
      </template>
    </view>
    <view class="index-list4 u-f-ac u-f-jsb">
      <view class="u-f-ac">
        <view class="u-f-ac" :class="{'active':(item.infonum.index==1)}"><view class="icon iconfont icon-icon_xiaolian-mian">{{item.infonum.dingnum}}</view></view>
        <view class="u-f-ac" :class="{'active':(item.infonum.index==2)}"><view class="icon iconfont icon-kulian">{{item.infonum.cainum}}</view></view>
      </view>
      <view class="u-f-ac">
        <view class="u-f-ac"><view class="icon iconfont icon-pinglun1">{{item.commentnum}}</view></view>
        <view class="u-f-ac"><view class="icon iconfont icon-zhuanfa">{{item.sharenum}}</view></view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props:{
      item:Object,//传过来是一个对象的形式
      index:Number
    }
  }
</script>

<style scoped>
.index-list {
  padding: 20rpx;
  border-bottom: 1rpx solid #eeeeee;
}
.index-list1 > view:first-child {
  color: #999999;
}
.index-list1 > view:first-child image {
  width: 85rpx;
  height: 85rpx;
  border-radius: 100%;
}
.index-list1 > view:last-child {
  background: #f4f4f4;
  border-radius: 5rpx;
  padding: 0 10rpx;
}

.index-list2 {
  padding-top: 15rpx;
  fint-size: 32rpx;
}
.index-list3 {
  position: relative;
  padding-top: 15rpx;
}
.index-list3 > image {
  width: 100%;
  border-radius: 20rpx;
}
.index-list4 {
  color: #999999;
  padding: 15rpx 0;
}
.index-list4 > view > view > view {
  padding-right: 10rpx;
}
.index-list4 > view > view:first-child {
  padding-right: 10rpx;
}
.index-list-play {
  position: absolute;
  font-size: 140rpx;
  color: #ffffff;
}
.index-list-playinfo {
  position: absolute;
  background: rgba(51, 51, 51, 0.72);
  color: #ffffff;
  bottom: 8rpx;
  right: 8rpx;
  border-radius: 40rpx;
  font-size: 22rpx;
  padding: 0 12rpx;
}
.index-list4 .active,
.index-list4 .active > view {
  color: #c5f61c;
}
</style>

父文件结构

注意：这儿不需要import引入和注册indexList组件了，配置了easycom后，这里就直接用组件即可

<template>
  <view>
    <block v-for="(item, index) in list" :key="index">
      <index-list :item="item" :index="index"></index-list>
    </block>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          userpic: '../../static/demo/userpic/12.jpg', //头像
          username: '昵称', //昵称
          isguanzhu: false, //是否关注
          title: '我是标题', //标题
          type: 'img', //img:图文  ，video：视频
          titlepic: '../../static/demo/datapic/11.jpg', //封面图
          infonum: {
            index: 1, //0：没有操作，1：顶，2：踩
            dingnum: 11,
            cainum: 11
          },
          commentnum: 10,
          sharenum: 10
        },
        {
          userpic: '../../static/demo/userpic/12.jpg', //头像
          username: '昵称', //昵称
          isguanzhu: true, //是否关注
          title: '我是标题', //标题
          type: 'video', //img:图文  ，video：视频
          titlepic: '../../static/demo/datapic/11.jpg', //封面图
          playnum: '2000万播放量',
          long: '2:33', //播放时长
          infonum: {
            index: 2, //0：没有操作，1：顶，2：踩
            dingnum: 11,//顶
            cainum: 11//踩
          },
          commentnum: 10,//评论数
          sharenum: 10//分享数
        }
      ]
    };
  }
};

如果觉得可以的话，点个赞在走哦！！！