微信小程序weui在线入门教程-基础组件-栏目首页

版权声明：摇亿.黄菊华 https://blog.csdn.net/u013818205/article/details/86413338

效果图

Wxml代码

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

 

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

      <view class="weui-cell__bd">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 class="weui-cell__bd">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 class="weui-cell__bd">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 class="weui-cell__bd">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 class="weui-cell__bd">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 class="weui-cell__bd">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 class="weui-cell__bd">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 class="weui-cell__bd">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 class="weui-cell__bd">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 class="weui-cell__bd">Footer页脚</view>

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

  </navigator>   

 

</view>

Wxss代码

.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

}

欢迎大家学习我的视频教程：微信小程序-WeUI界面布局设计入门到精通