13 uniapp-消息列表页面（下角标组件，time.js，换行问题）

13 消息列表页面（下角标组件，time.js，换行问题）

纵览效果图：

image-20200409120258326

一 导航栏配置

效果图：

![image-20200404175035043](13 消息列表页面.assets/image-20200404175035043.png)

pages.js

,{
            "path" : "pages/msg/msg",
            "style" : {
				"navigationBarTitleText":"消息列表",
				"app-plus":{
					"titleNView":{
						"buttons":[{
							"color":"#333333",
							"colorPressed":"#FD597c",
							"float":"left",
							"fontSize":"20px",
							"fontSrc":"/static/iconfont.ttf",
							"text":"\ue611"
						},{
							"color":"#333333",
							"colorPressed":"#FD597c",
							"float":"right",
							"fontSize":"20px",
							"fontSrc":"/static/iconfont.ttf",
							"text":"\ue649"
						}]
					}
				}
				
			}
        }

一 消息列表组件简单样式（处理了换行问题+引入了右下角标组件）：

效果：

![image-20200404175828604](13 消息列表页面.assets/image-20200404175828604.png)

代码：

<template>
	<view>
		<!-- 消息列表 -->
		<view class="flex align-center p-2 border-bottom">
			<image src="/static/default.jpg" class="mr-2" style="height: 80rpx;width: 80rpx;"></image>
			<!-- 只有要给flex-1 的时候其他的不变，当前元素会占满剩余空间。 -->
			<view class="flex flex-column flex-1">
				<view class="flex align-center  justify-between ">
					<text class="font-md">不吃苹果</text>
					<text class="text-secondary">下午 4:48</text>
				</view>
				<view class="flex align-center justify-between">
					<!-- 指定宽度进行 。。。换行处理 -->
					<text class="text-secondary text-ellipsis"
					style="max-width: 500rpx;">靓仔干啥呢靓仔干啥呢靓仔干啥呢靓仔干啥呢靓仔干啥呢靓仔干啥呢靓仔干啥呢</text>
					<!-- 1千万条之前问题不大 -->
					<uni-badge text="1000" type="error"></uni-badge>
				</view>
			</view>
		</view>
		
	</view>
</template>

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

<style>

</style>



# 提示：.text-ellipsis {
	/* #ifndef APP-PLUS-NVUE */
	overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
	/* #endif */
	/* #ifdef APP-PLUS-NVUE */
	lines: 1;
	/* #endif */
}

二 封装为消息列表组件（使用了vue过滤器+封装处理时间js）

效果：

![image-20200404183005789](13 消息列表页面.assets/image-20200404183005789.png)

components/msg/msg-list.vue(注意)

ps：过滤器语法直接看这个就ok，注意注释就ok

<template>
	<view>
		<!-- 消息列表 -->
		<view class="flex align-center p-2 border-bottom">
			<image :src="item.avatar" class="mr-2" style="height: 80rpx;width: 80rpx;"></image>
			<!-- 只有要给flex-1 的时候其他的不变，当前元素会占满剩余空间。 -->
			<view class="flex flex-column flex-1">
				<view class="flex align-center  justify-between ">
					<text class="font-md">{{item.username}}</text>
																				// 过滤器语法 过滤器内部使用了time.js的一个函数处理时间
					<text class="text-secondary">{{item.update_time | formatTime}}</text>
				</view>
				<view class="flex align-center justify-between">
					<!-- 指定宽度进行 。。。换行处理 -->
					<text class="text-secondary text-ellipsis"
					style="max-width: 500rpx;">{{item.data}}</text>
					<!-- 1千万条之前问题不大 -->
					<uni-badge :text="item.noread" type="error"></uni-badge>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniBadge from '@/components/uni-ui/uni-badge/uni-badge.vue'
	import $T from '@/common/time.js'
	export default {
		components:{
			uniBadge
		},
		props:['item','index'],
		data() {
			return {
				
			}
		},
		methods: {
			
		},
		// 过滤器
		filters:{
			formatTime(value){
				return $T.gettime(value);
			}
		}
		
	}
</script>

<style>

</style>

pages/msg/msg.vue

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

<script>
	import msgList from '@/components/msg/msg-list.vue'
	export default {
		components:{
			msgList
		},
		data() {
			return {
				list:[{
					avatar:"/static/default.jpg",
					username:"帝莎编程",
					update_time:1570718427,
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				},{
					avatar:"/static/default.jpg",
					username:"帝莎编程",
					update_time:1570718427,
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				},{
					avatar:"/static/default.jpg",
					username:"帝莎编程",
					update_time:1570718427,
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				},{
					avatar:"/static/default.jpg",
					username:"帝莎编程",
					update_time:1570718427,
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				}]
			}
		},
		methods: {
			
			
		}
	}
</script>

<style>

</style>

三 下拉刷新

1 实现下拉刷新

配置pages.json

"path" : "pages/msg/msg",
"style" : {
    "navigationBarTitleText":"消息列表",
    "enablePullDownRefresh":true,// 允许下拉刷新，并且产生下拉刷新动画
        "app-plus":{
          "titleNView":{
            "buttons":[{
              .......

page/msg/msg.vue

// 监听下拉刷新
		onPullDownRefresh(){
			this.refresh()
		},
		methods: {
			
			refresh(){
				setTimeout(()=>{
          // 为内容赋值
					this.list = demo
					// 关闭下拉刷新动画
					uni.stopPullDownRefresh()
				},2000)
			}
			
			
		}

四 下拉弹出消息组件

1 思路：

1 使用hello-uniapp扩展uni-Popup组件。

3 页面中使用该组件。

3 监听原生导航按钮事件，并且调用该组件的open()和close()方法实现关闭和打开。

2 简单实现

效果图：

image-20200407154800014

代码：

...
<uni-popup ref="popup" type="top"><text class="popup-content">下拉信息</text></uni-popup>
...
import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	export default {
		components:{
			uniPopup
		},
    
...
// 监听原声导航按钮事件
onNavigationBarButtonTap(e){
    console.log(e)
    switch (e.index){
      case 0: //左边
        break;
      case 1: //右边
        // 调用该组件的打开方法
        this.$refs.popup.open()
        break;
    }
},
methods: {

3 完善下拉组件

比上个加了点样式，加了个左侧按钮可以该组件的close而已。

效果图：

image-20200407161412412

代码：

<template>
	<view>
		<block v-for="(item,index) in list" :key='index'>
			<msg-list :item="item" :index='index'></msg-list>
		</block>
		<uni-popup ref="popup" type="top">
			<view class="flex align-center justify-center font-md bg-white p-1 border-bottom"
			hover-class="text-main">
				<text class="iconfont icon-sousuo mr-2"></text> 添加好友
			</view>
			<view class="flex align-center justify-center font-md bg-white p-1 border-bottom"
			hover-class="text-main">
				<text class="iconfont icon-shanchu mr-2"></text> 清除列表
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const demo =[{
					avatar:"/static/default.jpg",
					username:"帝莎编程",
					update_time:1570718427,
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				},{
					avatar:"/static/default.jpg",
					username:"帝莎编程",
					update_time:1570718427,
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				},{
					avatar:"/static/default.jpg",
					username:"帝莎编程",
					update_time:1570718427,
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				},{
					avatar:"/static/default.jpg",
					username:"帝莎编程",
					update_time:1570718427,
					data:"内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容",
					noread:20
				}]
	import msgList from '@/components/msg/msg-list.vue'
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue'
	export default {
		components:{
			msgList,
			uniPopup
		},
		data() {
			return {
				list:[]
			}
		},
		// 页面加载
		onLoad() {
			// this.list = demo
		},
		// 监听下拉刷新 
		onPullDownRefresh(){
			this.refresh()
		},
		// 监听原生导航按钮事件
		onNavigationBarButtonTap(e){
			console.log(e)
			switch (e.index){
				case 0: //左边
					this.$refs.popup.close()
					break;
				case 1: //右边
					this.$refs.popup.open()
					break;
			}
		},
		methods: {
			
			refresh(){
				setTimeout(()=>{
					this.list = demo
					// 停止下拉刷新
					uni.stopPullDownRefresh()
				},2000)
			}
			
			
		}
	}
</script>

<style>

</style>
posted @ 2020-04-09 12:02  张明岩  阅读(1159)  评论(0)  编辑  收藏  举报