收藏
回答

searchbar模拟器显示效果和真机显示效果不一致

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug input 客户端 7.0.3 2.5.2

- 当前 Bug 的表现(可附上截图)


- 预期表现



- 复现路径

pages/index/index

- 提供一个最简复现 Demo

<view class="page">

<view class="page__hd">

<view class="page__title">SearchBar</view>

<view class="page__desc">搜索栏</view>

</view>

<view class="page__bd">

<view class="weui-search-bar">

<view class="weui-search-bar__form">

<view class="weui-search-bar__box">

<icon class="weui-icon-search_in-box" type="search" size="14"></icon>

<input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />

<view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">

<icon type="clear" size="14"></icon>

</view>

</view>

<label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">

<icon class="weui-icon-search" type="search" size="14"></icon>

<view class="weui-search-bar__text">搜索</view>

</label>

</view>

<view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>

</view>

<view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">

<navigator url="" class="weui-cell" hover-class="weui-cell_active">

<view class="weui-cell__bd">

<view>实时搜索文本</view>

</view>

</navigator>

<navigator url="" class="weui-cell" hover-class="weui-cell_active">

<view class="weui-cell__bd">

<view>实时搜索文本</view>

</view>

</navigator>

<navigator url="" class="weui-cell" hover-class="weui-cell_active">

<view class="weui-cell__bd">

<view>实时搜索文本</view>

</view>

</navigator>

<navigator url="" class="weui-cell" hover-class="weui-cell_active">

<view class="weui-cell__bd">

<view>实时搜索文本</view>

</view>

</navigator>

</view>

</view>

</view>

Page({

data: {

inputShowed: false,

inputVal: ""

},

showInput: function () {

this.setData({

inputShowed: true

});

},

hideInput: function () {

this.setData({

inputVal: "",

inputShowed: false

});

},

clearInput: function () {

this.setData({

inputVal: ""

});

},

inputTyping: function (e) {

this.setData({

inputVal: e.detail.value

});

}

});


.searchbar-result{

margin-top: 0;

font-size: 14px;

}

.searchbar-result:before{

display: none;

}

.weui-cell{

padding: 12px 15px 12px 35px;

}

app.json

@import 'utils/weui.wxss';


page{

background: ghostwhite;

width: 100%;

font-size: 16px;

font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;

}

.page__hd {

padding: 40px;

height: 40px;

}

.page__bd {

padding-bottom: 40px;

height: 40px;

}

.page__bd_spacing {

padding-left: 15px;

padding-right: 15px;

}


.page__ft{

padding-bottom: 10px;

text-align: center;

}


.page__title {

text-align: left;

font-size: 20px;

font-weight: 400;

}


.page__desc {

margin-top: 5px;

color: #888888;

text-align: left;

font-size: 14px;

}

weui.wxss


/*!

* WeUI v1.1.1 (https://github.com/weui/weui-wxss)

* Copyright 2017 Tencent, Inc.

* Licensed under the MIT license

*/


年前正常使用,年后出现BUG!

最后一次编辑于  2019-02-12
回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容