位置:电子教程 > 小程序Weui在线教程 (如果看不到内容请使用360浏览器) 推荐学习资源
WEUI在微信小程序中的使用
项目框架的制作
栏目首页
weui基础组件
weui表单
weui 操作反馈相关
weui 导航 navbar 切换(类tab)使用教程
weui 搜索searchbar使用教程
当前阅读教程:小程序Weui在线教程 > 栏目首页
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 项目框架的制作 下一篇: weui基础组件

.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

}

效果如图所示。

image.png

上一篇: 项目框架的制作 下一篇: weui基础组件
毕业设计网             广告联系QQ:45157718(微信同号)