用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

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

天下雪 2017-2-18 00:10

作者:zhudiwoaini,来自原文地址1,新建一个wxmltemplate name="bottommenu" view class="bottomposition" navigator class="item_info" url="../home/home" image src="../img/sy.png"/image text首页/text /navig ...

作者:zhudiwoaini,来自原文地址 
1,新建一个wxml

  1. <template name="bottommenu">
  2. <view class="bottomposition">
  3. <navigator class="item_info" url="../home/home">
  4. <image src="../img/sy.png"></image>
  5. <text>首页</text>
  6. </navigator>
  7. <navigator class="item_info" url="/pages/home/home">
  8. <image src="../img/xx.png"></image>
  9. <text>消息</text>
  10. </navigator>
  11. <navigator class="item_info" url="/pages/home/home">
  12. <image src="../img/lz.png"></image>
  13. <text>履职</text>
  14. </navigator>
  15. <navigator class="item_info" url="/pages/home/home">
  16. <image src="../img/wo.png"></image>
  17. <text></text>
  18. </navigator>
  19. </view>
  20. </template>

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. <import src="../common/bottommenu/botmenu.wxml"/>
  2. <view class="info">
  3. <template is="bottommenu"></template>
  4. </view>

4,页面样式引用

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

5,页面效果

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
来自: 原文地址

相关阅读