13 消息列表頁面（下角標組件，time.js，換行問題）
縱覽效果圖：
一 導航欄配置
效果圖：
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"
}]
}
}
}
}
一 消息列表組件簡單樣式（處理了換行問題+引入了右下角標組件）：
效果：
代碼：
<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）
效果：
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 簡單實現
效果圖：
代碼：
...
<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而已。
效果圖：
代碼：
<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>