欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-02-01 17:17浏览: 来源:网络 作者:cola

新建一个wxml

 

  1. <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

 

  1. .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,页面引用

 

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

4,页面样式引用

 

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

5,页面效果

微信小程序 之 用户自定义模版(图1)





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。