WeUI for 小程序footer页脚

2018年09月30日 08:46 | 55次浏览 作者原创 版权保护

微信小程序页脚footer基础组件还是非常实用的,我们在开发小程序项目的时候会经常用到。

一、引入小程序weui css样式库,请参考第一章


二、在pages目录中新建目录footer以及文件footer.wxml,并添加如下代码

<view class="page">
<view class="page__hd">
<view class="page__title">Footer</view>
<view class="page__desc">页脚</view>
</view>
<view class="page__bd page__bd_spacing">
<view class="weui-footer">
<view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
</view>


<view class="weui-footer">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">底部链接</navigator>
</view>
<view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
</view>


<view class="weui-footer">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">底部链接</navigator>
<navigator url="" class="weui-footer__link">底部链接</navigator>
</view>
<view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
</view>


<view class="weui-footer weui-footer_fixed-bottom">
<view class="weui-footer__links">
<navigator url="" class="weui-footer__link">WeUI首页</navigator>
</view>
<view class="weui-footer__text">Copyright © 2008-2016 weui.io</view>
</view>
</view>
</view>


三、在根目录app.json配置文件中配置footer文件路径,相对应的js、css文件自动生成

"pages/footer/footer",


四、在pages/footer/footer.wxss文件中添加css样式代码

/* pages/footer/footer.wxss */
/* 作为展示用的样式 */

.weui-footer{
margin-bottom: 50px;
}
.weui-footer_fixed-bottom{
margin-bottom: 0;
}


五、预览效果


此文章本站原创,地址 https://www.vxzsk.com/1901.html   转载请注明出处!谢谢!

感觉本站内容不错,读后有收获?小额赞助,鼓励网站分享出更好的教程