weui-学习二

weui 邓文星
文章标签: weui

前言:今天写在使用weui写静态页面时出现了两个问题。

第一个问题:

代码

<div class="vux-x-switch weui-cell weui-cell_switch">
     <div class="weui-cell__bd" style="display: block; width: 5em;">
          <label class="weui-label">记住密码</label>
      </div>
      <div class="weui-cell__ft">
           <input class="weui-switch" type="checkbox" />
      </div>
</div>

<div class="weui-cells__title">开关</div>
     <div class="weui-cells weui-cells_form">
           <div class="weui-cell weui-cell_switch">
           <div class="weui-cell__bd">标题文字</div>
            <div class="weui-cell__ft">
                 <input class="weui-switch" type="checkbox" />
            </div>
       </div>
</div>

效果图微信截图_20180813205756.png

上面代码中使用两种布局来写开关,但是两种开关中的

<label class="weui-label">记住密码</label>
<div class="weui-cell__bd">标题文字</div>

“文字”都不能像身边小伙伴写出的不加css样式自动居右,纠结了许久,小伙伴也看过,也检查过都找不出问题出在哪里最后只好给加上css样式让其居右;

第二个问题:

代码:

<div class="weui-cells vux-no-group-title">
     <div class="vux-x-input weui-cell">
          <div class="weui-cell__hd">
               <label data-v-257055e4 class="input-header iconfont icon-yonghu" style="color: rgb(153, 153, 153);"></label>
          </div>
          <div class="weui-cell__bd weui-cell__primary vux-x-input-placeholder-center">
               <input id="vux-x-input-48pvo" placeholder="请输入手机号或Email" class="weui-input">
          </div>
          <div class="weui_cell_ft">
               <i class="weui_icon_warn"></i>
          </div>
     </div>
     <div class="vux-x-input weui-cell">
          <div class="weui-cell__hd">
               <label class="input-header iconfont icon-yonghu" style="color: rgb(153, 153, 153);">密码</label>
           </div>
           <div class="weui-cell__bd weui-cell__primary vux-x-input-placeholder-center">
                 <input id="vux-x-input-48pvo" placeholder="请输入六位以上的密码" class="weui-input">
            </div>
            <div class="weui_cell_ft">
                 <i class="weui_icon_warn"></i>
            </div>
      </div>
 </div>

我的效果图微信截图_20180813220957.png

小伙伴的效果图1534169684(1).png

我与小伙伴的代码就差了一个e22705**,但是无论我时否将其加上去都不能像小伙伴

一样将小图标显示出来;

求解

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :