通讯录列表页面email.nvue

<template>
  <view>
    <!-- 导航栏 -->
    <free-nav-bar title="通讯录"></free-nav-bar>
    <!-- 通讯录列表 -->
      <free-list-item v-for="(item,index) in topList" :key="index"  :title="item.title" :cover="item.cover" @click=""></free-list-item>
      
      <block v-for="(item,index) in list" :key="index">
        <view v-if="item.data.length>0">
          <view class="py-2 px-3 border-bottom bg-light">
            <text class="font-md text-dark">{{item.letter}}</text> 
          </view>
          <free-list-item v-for="(item2,index2) in item.data" :key="index2"  :title="item2" cover="/static/images/mail/friend.png" @click=""></free-list-item>
        </view>
      </block>
      
  </view>
</template>

<script>
  import freeNavBar from "@/components/free-ui/free-nav-bar.vue";
  import freeListItem from '@/components/free-ui/free-list-item.vue';
  export default {
    components:{
      freeNavBar,
      freeListItem
    },
    data() {
      return {
        topList:[
          {
            title:"新的朋友",
            cover:"/static/images/mail/friend.png",
            event:""
          },
          {
            title:"群聊",
            cover:"/static/images/mail/group.png",
            event:""
          },
          {
            title:"标签",
            cover:"/static/images/mail/tag.png",
            event:""
          }
        ],
        list:[{
          "letter":"A",
          "data":[
            "阿苏",
            "阿拉",
            "阿拉",
            "阿拉",
            "阿拉",
            "阿拉"
          ]
        },{
          "letter":"B",
          "data":[
            "baba",
            "霸占",
            "吧拉"
          ]
        }]
      }
    },
    methods: {
      
    }
  }
</script>

<style>

</style>

插件 free-list-item.vue

<template> 
  <view class="bg-white flex align-stretch" hover-class="bg-light" @click="$emit('click')">
    <view class="flex align-center justify-center py-2 px-3">
      <image :src="cover" v-if="cover" style="width: 75rpx;height: 75rpx;" mode="widthFix"></image>
    </view>
    <view class="flex-1 border-bottom flex align-center">
      <text class="font-md text-dark">{{title}}</text>
    </view>
  </view>
</template>

<script>
  export default{
    props:{
      // 封面
      cover:{
        type:String,
        default:""
      },
      // 标题
      title:{
        type:String,
        default:""
      }
    }
  }
</script>

<style>
</style>

生成之后的页面是酱紫的

uni-app 5.1~5.3 通讯录列表页开发_导航栏


好了，今天的内容就是这些了，感谢观看。