.wxml文件代码示例

小白教程网www.2d5.net

<view class="weui-cells  weui-cells_show ">

  <navigator url="/pages/01jichuzujian/01-article" class="weui-cell weui-cell_access">

      <view>article文章</view>

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

  </navigator>

  <navigator url="/pages/01jichuzujian/02-badge" class="weui-cell weui-cell_access">

      <view>Badge徽章</view>

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

  </navigator>

  <navigator url="/pages/01jichuzujian/03-flex" class="weui-cell weui-cell_access">

      <view>Flex的布局和样式</view>

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

  </navigator>

  <navigator url="/pages/01jichuzujian/04-grid" class="weui-cell weui-cell_access">

      <view>Grid九宫格</view>

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

  </navigator> 

  <navigator url="/pages/01jichuzujian/05-icon" class="weui-cell weui-cell_access">

      <view>Icon图标</view>

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

  </navigator>

  <navigator url="/pages/01jichuzujian/06-loadmore" class="weui-cell weui-cell_access">

      <view>Loadmore加载更多</view>

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

  </navigator>

  <navigator url="/pages/01jichuzujian/07-panel" class="weui-cell weui-cell_access">

      <view>Panel画板</view>

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

  </navigator>  

  <navigator url="/pages/01jichuzujian/08-preview" class="weui-cell weui-cell_access">

      <view>Preview表单预览</view>

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

  </navigator>  

  <navigator url="/pages/01jichuzujian/09-progress" class="weui-cell weui-cell_access">

      <view>Progress进度条</view>

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

  </navigator>    

  <navigator url="/pages/01jichuzujian/10-footer" class="weui-cell weui-cell_access">

      <view>Footer页脚</view>

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

  </navigator>   

</view>

.wxss文件代码示例

小白教程网www.2d5.net

.weui-cells{

  margin-top:0;opacity:0;

  -webkit-transform:translateY(-50%);

  transform:translateY(-50%);

  -webkit-transition:.3s;transition:.3s

}

.weui-cells:after,.weui-cells:before{

  display:none

}

.weui-cells_show{

  opacity:1;

  -webkit-transform:translateY(0);

  transform:translateY(0)

}

.weui-cell:before{

  right:15px

}

效果如图所示。