14 uniapp-我的好友列表开发（修订下角标组件）

14 我的好友列表开发（修订下角标组件）

纵览效果图：

一 page.json配置

效果：

代码：

,{
            "path" : "pages/user-list/user-list",
            "style" : {
				"app-plus":{					
					// 动画效果出现退出方向
					"animationType":"slide-in-left",
					// 导航栏配置
					"titleNView":{
						// 取消返回按钮（只有app端有效）
						"autoBackButton":false,
						// 搜索框配置
						"searchInput":{
							"align":"center",
							"backgroundColor":"#F5F4F2",
							"borderRadius":"4px",
							"disabled":true,
							"placeholder":"搜索用户",
							"placeholderColor":"#6D6C67"	
						},
						// 右侧按钮
						"buttons":[
							{
								"color":"#333333",
								"colorPressed":"#FD597C",
								"float":"right",
								"fontSize":"15px",
								"text":"取消"
							}
						]
						
					}
					
				}
			}
        }

二 好友列表组件开发（涉及uniapp图标）

效果：

代码（选取topic-detail的选项卡部分+index.vue的swiper部分：）

局部列表组件代码：

ps：uniapp图标在uniapp里扩展组件里面有

<!-- 列表样式 -->
							<view class="p-2 flex align-center border-bottom">
								<image class="mr-2" src="/static/default.jpg" style="height: 100rpx; width: 100rpx;"></image>
								<view class="flex flex-column justify-center flex-1">
									<text class="font-md text-dark">昵称</text>
									<text>性别</text>
								</view>
								<view class="uni-icon uni-icon-checkbox-filled text-light-muted">
									
								</view>
							</view>

全部代码：

<template>
	<view>
		<!-- 默认最新选项卡 -->
		<view class="p-2 flex">
			<view class="font flex-1 flex align-center justify-center font-weight-bold"
			v-for="(item,index) in tabBars" :key="index"
			:class="index===tabIndex?'text-main font-lg':''"
			@click="changeTab(index)"
			>{{item.name}}</view>
		</view>
		
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab"
		:style="'height:'+scrollH+'px'">
		<!-- 会默认分配索引 0 1 2 3 4 5  -->
			<swiper-item v-for="(item,index) in newsList" :key="index">
				
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
					<template v-if="item.list.length>0">
						<!-- 列表 -->
						<block v-for="(item2,index2) in item.list" :key="index2">
							
							<!-- 列表样式 -->
							<view class="p-2 flex align-center border-bottom">
								<image class="mr-2" src="/static/default.jpg" style="height: 100rpx; width: 100rpx;"></image>
								<view class="flex flex-column justify-center flex-1">
									<text class="font-md text-dark">昵称</text>
									<text>性别</text>
								</view>
								<view class="uni-icon uni-icon-checkbox-filled text-light-muted">
									
								</view>
							</view>
							
						</block>
						<!-- 上拉加载 -->
						<load-more :loadmore="item.loadmore"></load-more>
					</template>
					<template v-else>
						<!-- 无数据渲染页面 -->
						<no-thing>来了啊老弟</no-thing>
						
					</template>
						
						
						
				</scroll-view>
				
			</swiper-item>
			
		</swiper>
		
	</view>
</template>

<script>
	import loadMore from '@/components/common/load-more.vue'
	export default {
		components:{
			loadMore
		},
		data() {
			return {
				tabIndex:0,
				tabBars:[{
					name:"互关"
				},{
					name:"关注"
				},{
					name:"粉丝"
				}]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:res=>{
								// 可用窗口高度（屏幕高度-导航栏高度-底部栏高度。） -  选项卡高度
					this.scrollH = res.windowHeight - uni.upx2px(101)
					// console.log(this.scrollH)
				}
			})
			// 根据选项生成列表
			this.getData()
		},
		methods: {
			changeTab(index){
				this.tabIndex = index
				
			},
			// 监听选项内容滑动
			onChangeTab(e){
				this.changeTab(e.detail.current)
			},
			// 上拉加载更多
			loadmore(index){
				// 拿到当前列表
				let item = this.newsList[index]
				// 修改当前加载状态
				item.loadmore = '加载中。。。'
				// 模拟数据请求
				setTimeout(()=>{
					// 加载数据
								// ... 相当于取出来当前对象可以遍历出来的内容放到了当前对象里面。
								// 这个可以粗糙的理解为把合并了两个一摸一样的列表，列表里面原来的内容*2了 
					item.list = [...item.list,...item.list]
					item.loadmore = '上拉加载更多'
				},2000)
			},
			// 制作列表+上拉加载数据初始值
			getData(){
				var arr=[]
				for (let i = 0; i < this.tabBars.length;i++ ){
					let obj ={
						loadmore:"上拉加载更多",
						list:[]
					}
					if (i < 2) {
						obj.list = [1,2,2,3,4,2,23,32,23,23,23,23,23,23,12]
					}
					arr.push(obj)
				}
				this.newsList = arr
			},
		}
	}
</script>

<style>

</style>

三 修改性别组件并使用（定制原有的下角标组件）

效果：

代码：(修改原有代码加入插槽和图标宽度功能)

user-list.vue

...
<view class="flex flex-column justify-center flex-1">
									<text class="font-md text-dark">昵称</text> 
									<uni-badge :text="18" type="error" size="small" :iconwidth="13">
										<text class="iconfont icon-nv text-white font-sm" style="margin-right: 3rpx;"></text>
									</uni-badge>
								</view>
...
import uniBadge from '@/components/uni-ui/uni-badge/uni-badge.vue'
	export default {
		components:{
			uniBadge
		},
...

uni-badge.vue 观察注释的改动处

<template>
	<text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size" class="uni-badge" :style="width" @click="onClick()">
		<!-- 改动处 -->
		<slot></slot>{{ text }}
		</text>
</template>

<script>
	export default {
		name: 'UniBadge',
		props: {
			type: {
				type: String,
				default: 'default'
			},
			inverted: {
				type: Boolean,
				default: false
			},
			text: {
				type: [String, Number],
				default: ''
			},
			size: {
				// small.normal
				type: String,
				default: 'normal'
			},
			// 改动处
			iconwidth:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				// 改动处
				width: `display: inline-block;width: ${String(this.text).length * 15 + 25+this.iconwidth}rpx`
			};
		},
		methods: {
			onClick() {
				this.$emit('click');
			}
		}
	};
</script>

<style scoped>
	.uni-badge {
		/* #ifndef APP-PLUS */
		display: flex;
		/* #endif */
		flex-direction: row;
		height: 40rpx;
		line-height: 40rpx;
		color: #333;
		border-radius: 100px;
		background-color: #f1f1f1;
		background-color: transparent;
		text-align: center;
		font-family: 'Helvetica Neue', Helvetica, sans-serif;
		font-size: 12px;
		padding: 0;
	}

	.uni-badge--inverted {
		padding: 0 5px 0 0;
		color: #f1f1f1;
	}

	.uni-badge--default {
		color: #333;
		background-color: #f1f1f1;
	}

	.uni-badge--default-inverted {
		color: #999;
		background-color: transparent;
	}

	.uni-badge--primary {
		color: #fff;
		background-color: #007aff;
	}

	.uni-badge--primary-inverted {
		color: #007aff;
		background-color: transparent;
	}

	.uni-badge--success {
		color: #fff;
		background-color: #4cd964;
	}

	.uni-badge--success-inverted {
		color: #4cd964;
		background-color: transparent;
	}

	.uni-badge--warning {
		color: #fff;
		background-color: #f0ad4e;
	}

	.uni-badge--warning-inverted {
		color: #f0ad4e;
		background-color: transparent;
	}

	.uni-badge--error {
		color: #fff;
		background-color: #dd524d;
	}

	.uni-badge--error-inverted {
		color: #dd524d;
		background-color: transparent;
	}

	.uni-badge--small {
		transform: scale(0.8);
		transform-origin: center center;
	}
</style>

四 封装好友列表组件

其他正常封装，优化了高度问题，以免出现不该有的滚动条

代码：

pages/user-list/user-list.vue

<template>
	<view>
		<!-- 默认最新选项卡 -->
		<!-- 注意padding会把高度撑高，botter下边框要多给点距离。在下面剪掉这个距离-->
		<!-- 总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距 -->
		<!-- 总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距 -->
		<view class=" flex align-center" style="height: 100rpx;">
			<view class="font flex-1 flex align-center justify-center font-weight-bold"
			v-for="(item,index) in tabBars" :key="index"
			
			:class="index===tabIndex?'text-main font-lg':''"
			@click="changeTab(index)"
			>{{item.name}}</view>
		</view>
		
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab"
		:style="'height:'+scrollH+'px'">
		<!-- 会默认分配索引 0 1 2 3 4 5  -->
			<swiper-item v-for="(item,index) in newsList" :key="index">
				
				<scroll-view scroll-y="true" :style="'height:'+scrollH+'px;'" @scrolltolower="loadmore(index)">
					<template v-if="item.list.length>0">
						<!-- 列表 -->
						<block v-for="(item2,index2) in item.list" :key="index2">
							<user-list :item="item2" :index="index2">
								
							</user-list>
	
						</block>
						<!-- 上拉加载 -->
						<load-more v-if="item.list.length>10"
						:loadmore="item.loadmore"></load-more>
					</template>
					<template v-else>
						<!-- 无数据渲染页面 -->
						<no-thing>来了啊老弟</no-thing>
						
					</template>
						
						
						
				</scroll-view>
				
			</swiper-item>
			
		</swiper>
		
	</view>
</template>

<script>
	
	const demo = [{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:1, // 0未知，1女性，2男性
		age:24,
		isFollow:true
	},{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:2, // 0未知，1女性，2男性
		age:24,
		isFollow:false
	},{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:0, // 0未知，1女性，2男性
		age:30,
		isFollow:false
	},{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:0, // 0未知，1女性，2男性
		age:30,
		isFollow:false
	},{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:0, // 0未知，1女性，2男性
		age:30,
		isFollow:false
	},{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:0, // 0未知，1女性，2男性
		age:30,
		isFollow:false
	},{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:0, // 0未知，1女性，2男性
		age:30,
		isFollow:false
	},{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:0, // 0未知，1女性，2男性
		age:30,
		isFollow:false
	},{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:0, // 0未知，1女性，2男性
		age:30,
		isFollow:false
	},{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:0, // 0未知，1女性，2男性
		age:30,
		isFollow:false
	},{
		avatar:"/static/default.jpg",
		username:"昵称",
		sex:0, // 0未知，1女性，2男性
		age:30,
		isFollow:false
	}
	];
	
	import loadMore from '@/components/common/load-more.vue'
	import userList from '@/components/user-list/user-list.vue'
	export default {
		components:{
			loadMore,
			userList
		},
		data() {
			return {
				tabIndex:0,
				tabBars:[{
					name:"互关"
				},{
					name:"关注"
				},{
					name:"粉丝"
				}],
				scrollH:600,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success:res=>{
								// 可用窗口高度（屏幕高度-导航栏高度-底部栏高度。） -  选项卡高度
					this.scrollH = res.windowHeight - uni.upx2px(101)
					console.log(this.scrollH)
					
				}
			})
			// 根据选项生成列表
			this.getData()
		},
		methods: {
			changeTab(index){
				this.tabIndex = index
				
			},
			// 监听选项内容滑动
			onChangeTab(e){
				this.changeTab(e.detail.current)
			},
			// 上拉加载更多
			loadmore(index){
				// 拿到当前列表
				let item = this.newsList[index]
				// 修改当前加载状态
				item.loadmore = '加载中。。。'
				// 模拟数据请求
				setTimeout(()=>{
					// 加载数据
								// ... 相当于取出来当前对象可以遍历出来的内容放到了当前对象里面。
								// 这个可以粗糙的理解为把合并了两个一摸一样的列表，列表里面原来的内容*2了 
					item.list = [...item.list,...item.list]
					item.loadmore = '上拉加载更多'
				},2000)
			},
			// 制作列表+上拉加载数据初始值
			getData(){
				var arr=[]
				for (let i = 0; i < this.tabBars.length;i++ ){
					let obj ={
						loadmore:"上拉加载更多",
						list:[]
					}
					if (i < 2) {
						obj.list = demo
					}
					arr.push(obj)
				}
				this.newsList = arr
			},
		}
	}
</script>

<style>

</style>

componets/user-list/user-list.vue

<template>
	
	<!-- 列表样式 -->
	<view class="p-2 flex align-center border-bottom">
		<image class="mr-2" :src="item.avatar" style="height: 100rpx; width: 100rpx;"></image>
		<view class="flex flex-column justify-center flex-1">
			<text class="font-md text-dark">{{item.username}}</text> 
			<uni-badge :text="item.age" 
			:type="item.sex===1? 'error':'primary'" size="small" :iconwidth="13">
				<text v-if="item.sex>0"
				 class="iconfont  text-white font-sm" style="margin-right: 3rpx;"
				:class="item.sex===1? 'icon-nv':'icon-nan'"></text>
			</uni-badge>
		</view>
		<view class="uni-icon uni-icon-checkbox-filled"
		:class="item.isFollow?'text-light-muted':'text-main'">
			
		</view>
	</view>
	
</template>

<script>
	import uniBadge from '@/components/uni-ui/uni-badge/uni-badge.vue'
	export default {
		components:{
			uniBadge
		},
		props:['item','index'],
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>