<template>
<view class="w-detail">
<!-- <uni-nav-bar status-bar="true" fixed="true" shadow="false">
</uni-nav-bar> -->
<view class="w-detail-video">
<video src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls></video>
</view>
<view class="w-detail-title">{{article.title}}</view>
<view class="w-row w-justify-content-between w-detail-info">
<text>作者{{height}}:{{article.author}}</text>
<text>发布时间:{{article.time}}</text>
</view>
<view class="w-detail-content">
{{article.content}}
</view>
<view class="w-comment-list">
<w-comment v-for="i in 3" :key="i"/>
</view>
<view style="height: 140rpx"></view>
<view class="w-detail-footer w-row">
<text class="iconfont w-btn-back" @click="back"></text>
<view class="w-comment-textarea">
<textarea value="" placeholder="发表评论" placeholder-class="w-comment-placeholder iconfont" v-model="comment"/>
</view>
<text class="iconfont w-btn-publish" :style="{color:comment.length>0?'#13c500':'#333'}"></text>
</view>
</view>
</template>
<script>
import wComment from './components/wComment.vue';
import {
uniNavBar
} from '@dcloudio/uni-ui'
export default {
data() {
return {
article: {
title: '出暖和看全家春节黄金六线横空出世纵横市场助力百万投资者获利',
content: '侃股票-中国股民网络家园,聊大盘趋势侃行业概念热点,技术探讨与成果分享,搜集重大财经新闻、财经分析,分析涨停板股票的前世今生,资金流入前10名股票分析,建立完善股票池,通过热门股走势把握大盘趋。',
author: '招财猫',
time: '2021.06.12'
},
comment: '',
height: 0,
}
},
created() {
uni.onWindowResize((res) => {
console.log('变化后的窗口宽度=' + res.size.windowWidth)
console.log('变化后的窗口高度=' + res.size.windowHeight)
});
uni.onKeyboardHeightChange(res => {
console.log(res.height)
this.height = res.height;
})
},
components: {
wComment,
uniNavBar,
},
methods: {
back() {
uni.navigateBack()
}
}
}
</script>
<style lang='scss'scoped>
.w-detail {
.w-detail-video {
>video {
width: 750rpx;
height: 420rpx;
}
}
.w-detail-title {
padding: 0 40rpx;
font-size: 30rpx;
font-weight: 700;
line-height: 48rpx;
color: #333;
text-align: center;
}
.w-detail-info {
padding: 0 40rpx;
color: #777;
font-size: 24rpx;
line-height: 68rpx;
border-bottom: 1px solid #eee;
}
.w-detail-content {
padding: 20rpx 40rpx;
font-size: 24rpx;
line-height: 48rpx;
color: #333;
border-bottom: 1px solid #eee;
}
.w-detail-footer {
position: fixed;
bottom: 0;
left: 0;
box-sizing: border-box;
width: 100%;
height: 120rpx;
line-height: 120rpx;
background: #eee;
box-shadow: 0 -2rpx 8rpx #404040;
.w-comment-textarea {
height: 80rpx;
flex: 1 1;
align-self: center;
background: #f4f4f4;
border-radius: 40rpx;
>textarea {
box-sizing: border-box;
height: 100%;
width: 100%;
padding: 0 30rpx;
font-size: 24rpx;
line-height: 80rpx;
}
.w-comment-placeholder {
color: #777;
font-size: 24rpx;
&::before {
content: "\e645";
margin-right: 6rpx;
}
}
}
.iconfont {
flex: 0 0 auto;
font-size: 80rpx;
}
.w-btn-back {
padding: 0 40rpx;
color: #333;
}
.w-btn-publish {
padding: 0 40rpx;
color: #13c500;
}
}
}
</style>
- 发布:2021-04-28 12:50
- 更新:2021-04-28 22:58
- 阅读:949
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: window7 旗舰版
HBuilderX类型: 正式
HBuilderX版本号: 3.1.11
手机系统: Android
手机系统版本号: Android 10
手机厂商: 小米
手机机型: Redmi K30S Ultra
页面类型: vue
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
弹出键盘
弹出键盘
预期结果:
输入框会在键盘上面
输入框会在键盘上面
实际结果:
usb 调试时 可以 打包后不行
usb 调试时 可以 打包后不行
5***@qq.com (作者)
知道是哪个吗
2021-04-30 09:12
MonikaCeng
回复 5***@qq.com: 抱歉,搞错了,没有权限勾选需求。你还是看看代码的问题,或者让官方帮你看看吧
2021-04-30 11:21
5***@qq.com (作者)
回复 MonikaCeng: 好吧 问题是没人鸟 调试结果和打包后结果不一致就很烦
2021-04-30 15:29
1***@qq.com
回复 5***@qq.com: 你好请问你解决了吗
2022-07-11 15:01