uni-app 128创建收藏和收藏列表
Posted 2019ab
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app 128创建收藏和收藏列表相关的知识，希望对你有一定的参考价值。
/pages/my/fava/fava.vue
<template>
<view class="page">
<!-- 导航栏 -->
<free-nav-bar title="我的收藏" showBack :showRight="false"></free-nav-bar>
<view class="pt-3 px-3" v-for="(item,index) in list" :key="index">
<view class="bg-white rounded p-3">
<text v-if="item.type == 'text'">item.data</text>
<free-image v-else-if="item.type == 'image' || item.type == 'emoticon'" :src="item.data"></free-image>
<!-- <video :src="item.data" controls style="width: 500rpx;height: 400rpx;" controls></video> -->
<video v-else-if="item.type == 'video'" :poster="item.options.poster" :src="item.data" controls></video>
</view>
</view>
<!-- 上拉加载 -->
<view class="flex align-center justify-center py-5 bg-light" v-if="list.length >= 10">
<text class="text-muted font">loadmore</text>
</view>
</view>
</template>
<script>
import freeNavBar from '@/components/free-ui/free-nav-bar.vue';
import freeImage from '@/components/free-ui/free-image.vue';
import $H from '@/common/free-lib/request.js';
export default
components:
freeNavBar,
freeImage
,
data()
return
page:1,
list:[],
loadmore:'上拉加载中', // 没有更多了 加载中...
,
onLoad()
this.page = 1;
this.getData();
,
onPullDownRefresh()
this.page = 1;
this.getData().then(res=>
uni.stopPullDownRefresh(); // 关闭下拉刷新状态
)
,
onReachBottom()
this.page+=1;
this.getData().catch(err=>
this.page -= 1;
)
,
methods:
getData()
return new Promise((result,reject)=>
$H.get('/fava/'+this.page).then(res=>
let list = res.map(item=>
item.options = JSON.parse(item.options);
return item;
);
this.list = this.page === 1 ? list : [...this.list,...list];
this.loadmore = this.list.length == this.page * 10 ? '上拉加载更多' : '没有更多了';
result(res);
).catch(err=>
reject(err);
)
)
</script>
<style>
</style>
/pages/chat/chat/chat.vue
<template>
<view>
<!-- 导航栏 -->
<free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack>
<free-icon-button slot="right"
@click="openChatSet"><text class="iconfont font-lg"></text></free-icon-button>
</free-nav-bar>
<!-- 聊天内容区域 -->
<scroll-view scroll-y class="bg-light position-fixed left-0 right-0 px-3" style="bottom: 105rpx;box-sizing: border-box;" :style="chatBodyBottom" :show-scrollbar="false" :scroll-into-view="scrollIntoView" :scroll-with-animation="true"
@click="clickPage">
<!-- 聊天信息列表组件 -->
<view v-for="(item,index) in list" :key="index"
:id="'chatItem_'+index">
<free-chat-item :item="item" :index="index" ref="chatItem"
:pretime=" index > 0 ? list[index-1].create_time : 0"
@long="long" @preview="previewImage"
:shownickname="currentChatItem.shownickname"
></free-chat-item>
</view>
</scroll-view>
<!-- #ifdef APP-PLUS-NVUE -->
<div v-if="mode === 'action' || mode === 'emoticon'"
class="position-fixed top-0 right-0 left-0"
:style="'bottom:'+maskBottom+'px;'"
@click="clickPage"></div>
<!-- #endif -->
<!-- 底部输入框 -->
<view class="position-fixed left-0 right-0 border-top flex align-center" style="background-color: #F7F7F6;height: 105rpx;"
:style="'bottom:'+KeyboardHeight+'px;'">
<free-icon-button v-if="mode === 'audio'" @click="changeVoiceOrText"><text class="iconfont font-lg"></text></free-icon-button>
<free-icon-button v-else @click="changeVoiceOrText"><text class="iconfont font-lg"></text></free-icon-button>
<view class="flex-1">
<view v-if="mode === 'audio'" class="rounded flex align-center justify-center" style="height: 80rpx;" :class="isRecording?'bg-hover-light':'bg-white'" @touchstart="voiceTouchStart" @touchend="voiceTouchEnd" @touchcancel="voiceTouchCancel" @touchmove="voiceTouchMove">
<text class="font">isRecording ? '松开 结束':'按住 说话'</text>
</view>
<textarea v-else fixed class="bg-white rounded p-2 font-md" style="height: 50rpx;max-width: 450rpx;" :adjust-position="false" v-model="text" @focus="mode = 'text'"/>
</view>
<!-- 表情 -->
<free-icon-button
@click="openActionOrEmoticon('emoticon')"><text class="iconfont font-lg"
></text></free-icon-button>
<template v-if="text.length === 0">
<!-- 扩展菜单 -->
<free-icon-button
@click="openActionOrEmoticon('action')"><text class="iconfont font-lg"
></text></free-icon-button>
</template>
<view v-else class="flex-shrink">
<!-- 发送按钮 -->
<free-main-button name="发送"
@click="send('text')"></free-main-button>
</view>
</view>
<!-- 扩展菜单 -->
<free-popup ref="action" bottom transformOrigin="center bottom" @hide="KeyboardHeight = 0" :mask="false">
<view style="height: 580rpx;" class="border-top border-light-secondary bg-light">
<swiper :indicator-dots="emoticonOrActionList.length > 1" style="height: 510rpx;">
<swiper-item class="row"
v-for="(item,index) in emoticonOrActionList"
:key="index">
<view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;" v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)">
<image :src="item2.icon" mode="widthFix"
style="width: 100rpx;height: 100rpx;"></image>
<text class="font-sm text-muted mt-2"
>item2.name</text>
</view>
</swiper-item>
</swiper>
</view>
</free-popup>
<!-- 弹出层 -->
<free-popup ref="extend" :bodyWidth="240" :bodyHeight="450" :tabbarHeight="105">
<view class="flex flex-column"
style="width: 240rpx;"
:style="getMenusStyle">
<view class="flex-1 flex align-center"
hover-class="bg-light"
v-for="(item,index) in menusList"
:key="index"
@click="clickEvent(item.event)">
<text class="font-md pl-3">item.name</text>
</view>
</view>
</free-popup>
<!-- 录音提示 -->
<view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center" style="bottom: 105rpx;">
<view style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);" class="rounded flex flex-column align-center justify-center">
<image src="/static/images/audio/audio/recording.gif" style="width: 150rpx;height: 150rpx;"></image>
<text class="font text-white mt-3">unRecord ? '松开手指，取消发送':'手指上滑，取消发送'</text>
</view>
</view>
</view>
</template>
<script>
// #ifdef APP-PLUS-NVUE
const dom = weex.requireModule('dom')
// #endif
import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
import freeIconButton from "@/components/free-ui/free-icon-button.vue"
import freeChatItem from '@/components/free-ui/free-chat-item.vue';
import freePopup from "@/components/free-ui/free-popup.vue"
import freeMainButton from '@/components/free-ui/free-main-button.vue';
import mapState,mapMutations from 'vuex'
import auth from '@/common/mixin/auth.js';
import $U from '@/common/free-lib/util.js';
import $H from '@/common/free-lib/request.js';
import $C from '@/common/free-lib/config.js';
export default
mixins:[auth],
components:
freeNavBar,
freeIconButton,
freeChatItem,
freePopup,
freeMainButton
,
data()
return
scrollIntoView:"",
// 模式 text输入文字，emoticon表情，action操作，audio音频
mode:"text",
// 扩展菜单列表
actionList:[
[
name:"相册",
icon:"/static/images/extends/pic.png",
event:"uploadImage"
,
name:"拍摄",
icon:"/static/images/extends/video.png",
event:"uploadVideo"
,
name:"收藏",
icon:"/static/images/extends/shoucan.png",
event:"openFava"
,
name:"名片",
icon:"/static/images/extends/man.png",
event:"sendCard"
,
name:"语音通话",
icon:"/static/images/extends/phone.png",
event:""
,
name:"位置",
icon:"/static/images/extends/path.png",
event:""
]
],
emoticonList:[],
// 键盘高度
KeyboardHeight:0,
menusList:[],
navBarHeight:0,
list:[],
// 当前操作的气泡索引
propIndex:-1,
// 输入文字
text:"",
// 音频录制状态
isRecording:false,
RecordingStartY:0,
// 取消录音
unRecord:false,
detail:
id:0,
name:"",
avatar:"",
chat_type:"user"
,
mounted()
var statusBarHeight = 0
// #ifdef APP-PLUS-NVUE
statusBarHeight = plus.navigator.getStatusbarHeight()
// #endif
this.navBarHeight = statusBarHeight + uni.upx2px(90)
// 监听键盘高度变化
uni.onKeyboardHeightChange(res =>
if (this.mode !== 'action' && this.mode !== 'emoticon')
this.KeyboardHeight = res.height
if (this.KeyboardHeight > 0)
this.pageToBottom()
)
// 注册发送音频事件
this.regSendVoiceEvent((url)=>
if (!this.unRecord)
this.send('audio',url,
time:this.RecordTime
)
)
this.pageToBottom()
,
computed:
...mapState(
chatList:state=>state.user.chatList,
RECORD:state=>state.audio.RECORD,
RecordTime:state=>state.audio.RecordTime,
chat:state=>state.user.chat,
totalNoreadnum:state=>state.user.totalNoreadnum,
user:state=>state.user.user
),
// 当前会话配置信息
currentChatItem()
let index = this.chatList.findIndex(item=>item.id === this.detail.id && item.chat_type === this.detail.chat_type)
if(index !== -1)
return this.chatList[index]
return
,
// 获取蒙版的位置
maskBottom()