在wxss中引入base64图标的代码界面中的class引入对应的文件名,如:
class="iconfont icon-xuesheng" ,但是界面中却无法显示对应的图标,包括icon组件也会出现一些问题,
有时候显示,偶然又不显示,如下图:
正常情况如下图:
偶然会出现如下图:ISO 9.3.3版本
无法显示icon图标的样式;
在IOS9.3.3大部分可以显示,有时无法显示,用其他的IOS11.4.1和IOS12.0..上没有问题,是否是IOS的版本低导致的,求大神解释下,感激不尽。。。。。。。
楼主解决了么
只在Iphone9.3.3 的版本上有所体现,其余的机型没什么问题,解决的办法是,将图标替换为小程序本地的图标,以image标签显示图标可以解决
手机型号:iPhone 6s
IOS版本:9.3.3
微信版本:6.7.1
代码片段:
wechatide://minicode/m1iBQOmy7D1O
1、wxml
2、wxss
3、显示效果,想问下为啥 搜索的 icon 出不来呢? 还望多多指教
<icon type="search" size="20"></icon>
size的值是数字,不是像素表示
都一样的哦。别人说 input 是原生组件,显示层级最高,我觉得很有道理。
想问一下,这种效果怎么实现??
<view class="page">
<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>
css:
.searchbar-result{
margin-top: 0;
font-size: 14px;
}
.searchbar-result:before{
display: none;
}
.weui-cell{
padding: 12px 15px 12px 35px;
}
.weui-search-bar{position:relative;padding:8px 10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#efeff4;border-top:1rpx solid #d7d6dc;border-bottom:1rpx solid #d7d6dc}
.weui-icon-search{margin-right:8px;font-size:inherit}
.weui-icon-search_in-box{position:absolute;left:10px;top:7px}.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:middle}
.weui-search-bar__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-radius:5px;background:#fff;border:1rpx solid #e6e6ea}
.weui-search-bar__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1}
.weui-search-bar__input{height:28px;line-height:28px;font-size:14px}.weui-icon-clear{position:absolute;top:0;right:0;padding:7px 8px;font-size:0}
.weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:3px;text-align:center;color:#9b9b9b;background:#fff;line-height:28px}
.weui-search-bar__cancel-btn{margin-left:10px;line-height:28px;color:#09bb07;white-space:nowrap}
试试刚才的代码,css自己优化,icon标签与input标签确实存在层级问题
你好,请提供一下出现问题的机型和微信版本,以及能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
2、php
3、为啥跳转的时候就变成这样了,然后 小程序里面是没有问题,但是 php 里面内容没有解析,直接返回去了
3.1、网页版
3.2、小程序
微信联系
1、wxml
2、wxss和结果展示(明明有很多空间呀,而且 我也写了 宽,为啥 红色的view 硬是要撑那么宽? 真机上直接比手机屏幕海大, 可以“左右滑动”233333 。以为小程序有问题,重启各种也不行,还望各位指教一二)
查一下rpx与px的区别 ,获取手机的宽度是px的,width属性最好不要在wxss中写rpx,不同的手机的width就不一样了