uni-app 175app端兼容处理
Posted 2019ab
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了uni-app 175app端兼容处理相关的知识，希望对你有一定的参考价值。
/pages/find/moments/moments.nvue
<template>
<view>
<free-transparent-bar :scrollTop="scrollTop" @clickRight="clickRight"></free-transparent-bar>
<view class="position-relative" style="height: 620rpx;">
<image src="https://douyinzcmcss.oss-cn-shenzhen.aliyuncs.com/shengchengqi/datapic/1.jpg" mode="aspectFill" style="height: 590rpx;" class="bg-secondary w-100"></image>
<image :src="user.avatar || '/static/images/demo/demo6.jpg'" style="width: 120rpx;height:120rpx;right: 30rpx;" mode="" class="bg-secondary rounded position-absolute bottom-0"></image>
<text class="text-white font-md position-absolute" style="bottom: 45rpx;right: 160rpx">user.nickname || user.username</text>
</view>
<!-- 朋友圈列表样式 -->
<free-moment-list v-for="(item,index) in list" :key='index' :item="item" :index="index" @action="doAction" @reply="replyEvent"></free-moment-list>
<!-- 评论框 -->
<free-popup ref="action" bottom transformOrigin="center bottom">
<view style="height: 105rpx;" class="bg-light border-top flex align-center">
<textarea fixed class="bg-white rounded p-2 font-md" style="height: 80rpx;width: 480rpx;" value="" placeholder="" v-model="content" :focus="true"/>
<free-icon-button @click="changeFaceModeal"><text class="iconfont font-lg"></text></free-icon-button>
<free-main-button name="发送" :disabled="content.length===0" @click="send"></free-main-button>
</view>
<!-- 表情包 -->
<scroll-view v-if="faceModal" scroll-y="true" style="height: 350rpx;" class="bg-light">
<view class="flex flex-wrap">
<view class="flex align-center justify-center" hover-class="bg-white" style="width:107rpx;height:107rpx;" v-for="(item,index) in faceList" :key="index" @click="addFace(item)">
<text>item</text>
</view>
</view>
</scroll-view>
</free-popup>
<!-- 上拉加载 -->
<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 freeTransparentBar from '@/components/free-ui/free-transparent-bar.vue';
import freeMomentList from '@/components/free-ui/free-moment-list.vue';
import freePopup from '@/components/free-ui/free-popup.vue';
import freeIconButton from '@/components/free-ui/free-icon-button.vue';
import freeMainButton from '@/components/free-ui/free-main-button.vue';
import $H from '@/common/free-lib/request.js';
import mapState from 'vuex';
export default
components:
freeTransparentBar,
freeMomentList,
freePopup,
freeIconButton,
freeMainButton
,
data()
return
content:'',
scrollTop:0,
faceModal:false,
faceList:["😀","😁","😂","😃","😄","😅","😆","😉","😊","😋","😎","😍","😘","😗","😙","😚","😇","😐","😑","😶","😏","😣","😥","😮","😯","😪","😫","😴","😌","😛","😜","😝","😒","😓","😔","😕","😲","😷","😖","😞","😟","😤","😢","😭","😦","😧","😨","😬","😰","😱","😳","😵","😡","😠"],
commentIndex:-1,
page:1,
loadmore:'上拉加载更多',
key:'moment_timeline',
list:[],
reply_user:false
,
onPageScroll(e)
this.scrollTop = e.scrollTop;
,
onReachBottom()
if(this.loadmore !== '上拉加载更多')
return;
this.page += 1;
this.loadmore = '加载中...';
this.getData().catch(err=>
this.page -= 1;
uni.showToast(
title:'加载失败',
icon:'none'
);
this.loadmore = '上拉加载更多';
)
,
onLoad(e)
if(e.key)
this.key = e.key;
this.page = 1;
this.getData();
uni.$on('momentNotice',this.momentNotice)
,
destroyed()
uni.$off('momentNotice',this.momentNotice)
,
onPullDownRefresh()
this.page = 1;
this.getData().then(res=>
uni.showToast(
title:'刷新成功',
icon:'none'
);
uni.stopPullDownRefresh();
).catch(err=>
uni.showToast(
title:'刷新失败',
icon:'none'
);
uni.stopPullDownRefresh();
);
,
computed:
...mapState(
user:state=>state.user.user
)
,
methods:
momentNotice(e)
this.page = 1;
this.getData().then(res=>
uni.showToast(
title:'刷新成功',
icon:'none'
);
);
,
// 点击操作菜单
doAction(e)
uni.showActionSheet(
itemList: ['点赞','评论'],
success: res =>
if(res.tapIndex === 0)
// 点赞
this.doSupport(e)
else
this.content='';
this.faceModal=false;
this.commentIndex = e.index;
this.reply_user = false;
this.$refs.action.show();
// this.doComment(e)
);
,
// 获取数据
getData()
return new Promise((result,reject)=>
let page = this.page;
$H.get('/'+this.key+'/'+page).then(res=>
this.list = page === 1 ? res : [...this.list,...res];
this.loadmore = this.list.length === (page * 10) ? '上拉加载更多' : '没有更多了'
result(res);
).catch(err=>
reject(err);
)
)
,
// 点赞
doSupport(e)
$H.post('/moment/like',id:e.item.moment_id).then(res=>
let i = e.item.likes.findIndex(item=>item.id === this.user.id);
if(i !== -1)
// 取消点赞
e.item.likes.splice(i,1);
else
// 点赞
e.item.likes.push(
id:this.user.id,
name:this.user.nickname || this.user.username
)
uni.showToast(
title:i !== -1 ? '取消点赞成功' : '点赞成功',
icon:'none'
);
)
,
// 添加表情
addFace(item)
this.content += item;
,
// 开启关闭表情包面板
changeFaceModeal()
uni.hideKeyboard();
setTimeout(()=>
this.faceModal = !this.faceModal;
,100);
,
// 发送
send()
console.log(this.reply_user);
let item = this.list[this.commentIndex];
$H.post('/moment/comment',
id:item.moment_id,
content:this.content,
reply_id:this.reply_user ? this.reply_user.id : 0
).then(res=>
item.comments.push(
content:this.content,
user:
id:this.user.id,
name:this.user.nickname || this.user.username
,
replay:this.reply_user ? this.reply : null
)
uni.showToast(
title:'评论成功',
icon:'none'
)
)
this.$refs.action.hide();
,
replyEvent(e)
this.content = '';
this.faceModal = false,
this.commentIndex = e.index,
this.reply_user = e.reply;
this.$refs.action.show();
,
// 选择发表朋友圈类型
clickRight()
let list = [
name:'图文',
key:'image'
,
name:'视频',
key:'video'
,
name:'文字',
key:'content'
];
uni.showActionSheet(
itemList:list.map(v=>v.name),
success:res=>
uni.navigateTo(
url: '../add-moment/add-moment?type='+list[res.tapIndex].key,
);
)
,
</script>
<style>
</style>
/pages/chat/chat/chat.nvue
<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">&<以上是关于uni-app 175app端兼容处理的主要内容，如果未能解决你的问题，请参考以下文章
uni-app - 子组件中实现 onShow() 生命周期，监听页面 onShow() 实时刷新子组件内的数据（子组件中模拟页面 onShow 钩子函数，当页面显示时自动执行函数）全端兼容无 BUG