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

作者：zhudiwoaini，来自原文地址 
1，新建一个wxml

<template name="bottommenu">
      <view class="bottomposition">
            <navigator  class="item_info" url="../home/home">
                  <image src="../img/sy.png"></image>
                  <text>首页</text>
            </navigator>
            <navigator  class="item_info" url="/pages/home/home">
                  <image  src="../img/xx.png"></image>
                  <text>消息</text>
            </navigator>
            <navigator  class="item_info" url="/pages/home/home">
                  <image src="../img/lz.png"></image>
                  <text>履职</text>
            </navigator>
            <navigator  class="item_info" url="/pages/home/home">
                  <image src="../img/wo.png"></image>
                  <text>我</text>
            </navigator>
      </view>
</template>

2，新建wxss

.bottomposition{
    width: 100%;
    height: 10%;
    position: fixed;
    overflow: hidden;
    left: 0;
    top: 90%;
z-index: 1100;
    display: flex;
    border-top: 1rpx solid #dadada;
}
.item_info {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.item_info image {
    width: 20px;
    height: 20px;
}
.item_info text {
    margin-top: 5px;
    font-size: 12px;
}

3，页面引用

<import src="../common/bottommenu/botmenu.wxml"/>
<view class="info">
  <template is="bottommenu"></template>
</view>

4，页面样式引用

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

5，页面效果

53a1d766f18aabc4ca15ce5ce1087f0a.png (33.97 KB, 下载次数: 57)

下载附件

2018-1-14 00:15 上传