收藏
回答

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
回答关注问题邀请回答
收藏

2 个回答

  • 禾店短剧系统
    禾店短剧系统
    2021-06-02

    在微信小程序中,模拟机和真机上效果不一样,或者UI布局混乱的原因之一是子组件的宽度(高度)超过了父组件的宽度(高度),因此在布局中一定要注意子组件和父组件的宽度问题,否则很容易导致bug;


    除此之外,属性overflow:hidden一般配合box-sizing:border-box使用

    2021-06-02
    有用 1
    回复
  • 是小白啊
    是小白啊
    2019-02-12

    麻烦提供下代码片段:https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-02-12
    有用
    回复 5
    • 2019-02-12

      自从更新微信程序7.0.3之后固定置顶搜索框就出现问题

      2019-02-12
      回复
    • 是小白啊
      是小白啊
      2019-02-12回复

      https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html,麻烦按照提示提供下代码片段以及具体的机型

      2019-02-12
      回复
    • 2019-02-12回复是小白啊

      代码片段已上传 机型Iphone7 ios 12.2

      2019-02-12
      回复
    • 江
      2019-04-14回复

      请问问题解决了吗?

      2019-04-14
      回复
    • 特菲巴
      特菲巴
      2020-12-13
      居然两年了还没有解决!!!
      2020-12-13
      回复
登录 后发表内容