[微信小程序]searchbar模拟器显示效果和真机显示效果不一致 [看看有没有效果是需要时间的。]

- 当前 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!

  • 麻烦提供下代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html, 聊天软件而已。
    • 自从更新微信程序7.0.3之后固定置顶搜索框就出现问题, 这是在说什么?
    • https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html,麻烦按照提示提供下代码片段以及具体的机型, QQ那玩意就像泡女朋友,等星星,等月亮,然后就有太阳了
    • 代码片段已上传 机型Iphone7 ios 12.2, 我也是