用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序 之 用户自定义模版

纸飞机 2018-3-8 09:38

作者:zhudiwoaini,来自原文地址 1,新建一个wxml 首页 消息 ...

作者:zhudiwoaini,来自

原文地址


1,新建一个wxml

  1. name="bottommenu">
  2. class="bottomposition">
  3. class="item_info" url="../home/home">
  4. src="../img/sy.png">
  5. 首页
  6. class="item_info" url="/pages/home/home">
  7. src="../img/xx.png">
  8. 消息
  9. class="item_info" url="/pages/home/home">
  10. src="../img/lz.png">
  11. 履职
  12. class="item_info" url="/pages/home/home">
  13. src="../img/wo.png">

2,新建wxss

  1. .bottomposition{
  2. width: 100%;
  3. height: 10%;
  4. position: fixed;
  5. overflow: hidden;
  6. left: 0;
  7. top: 90%;
  8. z-index: 1100;
  9. display: flex;
  10. border-top: 1rpx solid #dadada;
  11. }
  12. .item_info {
  13. width: 25%;
  14. height: 100%;
  15. display: flex;
  16. align-items: center;
  17. flex-direction: column;
  18. justify-content: center;
  19. }
  20. .item_info image {
  21. width: 20px;
  22. height: 20px;
  23. }
  24. .item_info text {
  25. margin-top: 5px;
  26. font-size: 12px;
  27. }

3,页面引用

  1. src="../common/bottommenu/botmenu.wxml"/>
  2. class="info">
  3. is="bottommenu">

4,页面样式引用

  1. @import "../common/bottommenu/botmenu.wxss";

5,页面效果

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏