weui-wxss 和 WeUI 的用法差异 - 文章教程

weui-wxss 和 WeUI 的用法差异

发布于 2021-10-14 字数 3441 浏览 830 评论 0

不支持相邻兄弟选择器 -> after someone

如:.weui-cells__title + .weui-cells -> .weui-cells_after-title

Old

<div class="weui-cells__title">带说明的列表项</div>
<div class="weui-cells"></div>

New

<view class="weui-cells__title">带说明的列表项</view>
<view class="weui-cells weui-cells_after-title"></view>

不支持级联选择器 -> in someone

如:.weui-cell_access .weui-cell__ft -> weui-cell__ft_in-access

Old

<div class="weui-cell weui-cell_access">
    <div class="weui-cell__ft"></div>
</div>

New

<view class="weui-cell weui-cell_access">
    <view class="weui-cell__ft weui-cell__ft_in-access"></view>
</view>

如:.weui-cells_radio .weui-cell__ft -> .weui-cell__ft_in-radio

Old

<div class="weui-cells weui-cells_radio">
    <label class="weui-cell weui-check__label">
        <div class="weui-cell__ft">
            <span class="weui-icon-checked"></span>
        </div>
    </label>
</div>

New

<view class="weui-cells weui-cells_with-title">
    <label class="weui-cell weui-check__label">
        <view class="weui-cell__ft weui-cell__ft_in-radio">
            <icon class="weui-icon-radio" type="success_no_circle" size="16"></icon>
        </view>
    </label>
</view>

icon

采用小程序的icon。因为原生的iconfont-size:0,所以需要新增一些类来控制icon的边距,如.weui-icon-radio.weui-icon-checkbox_circle等,具体看代码。(当然,你也可以不加。)

button

采用小程序的button,.weui-btn则用于控制间距

Old

<a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作 Normal</a>

New

<button class="weui-btn" type="primary">页面主操作 Normal</button>

weui-cell_access的:active

navigatorhover-class来指定类weui-cell_active来控制

New

<navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
    <view class="weui-cell__bd">cell standard</view>
    <view class="weui-cell__ft weui-cell__ft_with-access">说明文字</view>
</navigator>

.weui-input

因为采用小程序的input,键盘弹起高度有所区别,所以实现上也有所改变,需要增加.weui-cell_input的扩展类

Old

<div class="weui-cell">
    <div class="weui-cell__bd">
        <input class="weui-input" />
    </div>
</div>

New

<view class="weui-cell weui-cell_input">
    <view class="weui-cell__bd">
        <input class="weui-input" />
    </view>
</view>

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!