版权声明:摇亿.黄菊华 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
}