1.先下拉加载出数据
2.获取搜索框焦点
3.取消搜索
页面底部部分数据显示不完全
windspoors
- 发布：2020-07-23 18:17
- 更新：2020-07-23 18:17
- 阅读：744
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： window10
HBuilderX类型： 正式
HBuilderX版本号： 2.7.14
手机系统： Android
手机系统版本号： Android 8.0
手机厂商： 小米
手机机型： Mi5s
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
页面底部部分数据显示完全
页面底部部分数据显示完全
实际结果：
页面底部部分数据显示不完全
页面底部部分数据显示不完全
bug描述：
顶部搜索框获取焦点再取消，页面底部一部分内容将无法显示。
莫名其妙的就出现了这个问题。
页面代码
<template>
<view class="container">
<view class="video-list">
<view v-for="(video , index) in videolist" class="video">
<image :src="video.pic" mode="aspectFill" class="image"></image>
<view>{{video.name}}</view>
</view>
</view>
<view>这是最下面的内容</view>
</view>
</template>
<script>
import Base from "../../common/base.js";
export default {
data() {
return {
videolist: []
}
},
onLoad() {
},
onPullDownRefresh() {
this.loadVideoList({
ac: "list"
});
setTimeout(function(){
uni.stopPullDownRefresh();
} , 1000);
},
onNavigationBarSearchInputClicked(e) {
console.log('点击了搜索')
},
onNavigationBarSearchInputConfirmed(e){
console.log('用户点击了搜索');
console.log(e);
var that = this;
var wd = e.text;
var webView = this.$mp.page.$getAppWebview(); // 获取原生对象
webView.setTitleNViewSearchInputText(''); // 将搜索数据清空
webView.setTitleNViewSearchInputFocus(false); // 取消焦点
console.log(webView);
Base.request({
wd: wd,
ac: "list"
} , function(res){
that.videolist = res.data.data.video;
})
},
methods: {
loadVideoList(data , type){
var that = this;
Base.request( data , function(res){
that.videolist = res.data.data.video;
});
}
}
}
</script>
<style>
.container {
width: 750upx;
}
.video-list {
padding: 2upx;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: 750upx;
}
.video {
width: 373upx;
padding: 2upx;
font-size: 12px;
}
.image {
height: 185upx;
width: 369upx;
}
</style>