收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
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!

最后一次编辑于  02-12  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

1 个回答

  • 是柿子啊
    是柿子啊
    02-12

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

    02-12
    赞同
    回复 4
    • @
      @
      02-12

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

      02-12
      回复
    • 是柿子啊
      是柿子啊
      02-12回复@

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

      02-12
      回复
    • @
      @
      02-12回复是柿子啊

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

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

      请问问题解决了吗?

      04-14
      回复