<template>
<view class="container">
<navigation-bar title="My Page" />
<!-- :style="{ height: scrollViewHeight + 'px' }" -->
<!-- #ifdef APP-PLUS -->
<view id="statusbar" class="status-bar"></view>
<!-- #endif -->
<!-- #ifdef APP-PLUS -->
<view class="box-bg fixedNavBar" style="top: 28px;">
<uni-nav-bar shadow left-icon="bars" leftText="" rightText="" title="同问" />
</view>
<!-- #endif -->
<!-- #ifdef H5 -->
<view class="box-bg fixedNavBar">
<uni-nav-bar shadow right-icon="list" leftText="" rightText="" title="同问" />
</view>
<!-- #endif -->
<view class="main">
<uni-list class="list">
<view class="context" v-for="(item, index) in myData">
{{item.name}}
</view>
</uni-list>
</view>
<!-- <scroll-view class="my-scroll-view" :pull-down-refresh="true" @refresh="onRefresh">
</scroll-view> -->
<view class="footer center">
<view style="width: 85%;">
<textarea class="text" confirm-type="go" @confirm="addMessage" @input="inputData" @focus="onFocus" placeholder="快来问我吧,可多行输入,问题长度最多700字~"
maxlength="700" v-model="content" />
</view>
<view style="width: 15%; padding-right: 5px; padding-left: 5px;">
<!-- <text class="mButton" @click="addMessage">发送</text> -->
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
// Your data here
scrollViewHeight: 500,
myData: [],
content:'',
keyboardHeight: 0,
};
},
mounted() {
// #ifdef APP-PLUS
uni.onKeyboardHeightChange(res => {
this.keyboardHeight = res.height;
console.log("键盘高度:"+this.keyboardHeight + 200)
});
// #endif
this.initData()
},
methods: {
initData() {
let data = []
for (var i = 0; i < 20; i++) {
data.push({index: i, name: "第-"+i+"项"})
}
this.myData = data
console.log(this.myData)
},
onRefresh() {
// Refresh your data here
console.log("Refresh your data here")
},
//发送消息
addMessage (params) {
console.log("发送消息")
},
onFocus(e) {
console.log("----------------onFocus-----------------"+e.detail.height)
uni.$emit('scrollToBottom')
},
inputChange(e) {
console.log("--------inputChange-------------"+e.detail.height)
},
inputData(e) {
console.log("--------inputData-------------")
this.content = e.detail.value
}
}
};
</script>
<style>
.my-scroll-view {
overflow: auto;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow-x: hidden;
}
.status-bar {
position: fixed;
display: flex;
z-index: 999;
flex: 1;
flex-direction: column;
height: 28px;
top: 0;
left:0;
right:0;
/* background-color: aqua; */
}
.fixedNavBar {
display: flex;
position: fixed;
justify-content: space-around;
width: 100%;
z-index: 999;
height: 44px;
flex: 1;
flex-direction: column;
background-color: aqua;
}
.footer {
position: fixed;
flex-direction: row;
bottom: 0;
right: 0;
width: 100%;
height: 70px !important;
overflow-x:hidden;
border-top: solid 1px #DDD;
}
.main{
/* #ifdef H5 */
top: 44px;
/* #endif */
/* #ifndef H5 */
top: 72px;
/* #endif */
bottom: 70px;
height: 500px;
position: relative;
display: block;
flex: 1;
/* overflow: hidden; */
}
.context {
height: 100px;
border-style:dotted;
border-width:1px;
}
.text {
display: inline-block;
padding: 8px 8px 8px 8px;
background-color: #FFFFFF;
height: 60px !important;
width: 70%;
line-height: 22px;
color: #000000;
border-radius: 10px;
font-size: 14px;
}
.mButton{
margin: 10px 15px 10px 10px;
background-color: #1E90FF;
color: #FFFFFF;
border-radius: 10px;
}
.center {
/* flex: auto; */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
</style>
- 发布:2023-03-16 09:45
- 更新:2023-04-11 20:58
- 阅读:224
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: Alpha
HBuilderX版本号: 3.5.5
浏览器平台: Chrome
浏览器版本: 110.0.5481.178(正式版本) (64 位)
项目创建方式: HBuilderX
操作步骤:
预期结果:
不会去影响开发者自己代码中本质的样式设置,开发者设置的样式优先于ui库,右边能够显示滚动条
不会去影响开发者自己代码中本质的样式设置,开发者设置的样式优先于ui库,右边能够显示滚动条
实际结果:
引入的ui库样式优先级高于使用者设置的样式,导致基本的显示滚动条消失了,反而给开发带来了麻烦
引入的ui库样式优先级高于使用者设置的样式,导致基本的显示滚动条消失了,反而给开发带来了麻烦
bug描述:
右边的滚动条不见了,在标签处设置样式overflow-y: scroll都不行,覆盖不掉
去掉全局样式就可以了,但是有的又用到了该colorui的组件库