zoukankan      html  css  js  c++  java
  • 小程序 TabBar 定制

    使用微信小程序开发时,用到了其 API - tabBar,设置如下(详细的内容可以参考官网 api):

    "tabBar": {
            "color": "#999",
            "selectedColor": "#f04848",
            "backgroundColor": "#ffffff",
            "borderStyle": "black",
            "list": [{
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "images/shouye.png",
                "selectedIconPath": "images/shouyeActive.png"
            }, {
                "pagePath": "pages/myWelfare/myWelfare",
                "text": "我的",
                "iconPath": "images/wode.png",
                "selectedIconPath": "images/wodeActive.png"
            }]
        }

    预览发现,页面下方的图标和文字大小、间距等无法改变。为了优化用户体验,决定使用自定义组件。

    组件代码结构如下:

    tabBar.js是组件的业务逻辑代码:

    Component({
        // 组件属性
        properties: {
            // 是否是首页
            cur: Number
        },
    
        // 初始化数据
        data: {
            list: [{
                img: "./icon/shouye.png",
                imgh: "./icon/shouyeActive.png",
                name: "首页",
                link: '/pages/index/index'
            }, {
                img: "./icon/wode.png",
                imgh: "./icon/wodeActive.png",
                name: "我的",
                link: "/pages/myWelfare/myWelfare"
            }]
        },
    
        // 组件方法
        methods: {
            runTo(e) {
                let link = e.currentTarget.dataset.link;
                wx.redirectTo({
                    url: link
                })
            }
        }
    })

    tabBar.wxml是页面模板:

    <view class='content'>
        <view wx:for="{{list}}" wx:key="{{index}}"
        class="tab-bar {{cur == index ? 'cur':''}}"
        bindtap="runTo" data-link="{{item.link}}">
            <image src="{{cur == index ?item.imgh:item.img}}"></image>
            <view><text>{{item.name}}</text></view>
        </view>
    </view>

    修改之后的效果如下:

  • 相关阅读:
    Java修改excel内容
    text标签onchang事件
    shh将数据导出excel
    正则表达式0到200以内的数
    虚拟内存与物理内存
    捕获内核的异常事件
    linux内存(三)内核与用户空间交互
    linux内存(二)高端内存
    linux内存(一) 内核空间与用户空间
    使用tc配置后端设备,来限制虚拟机网卡带宽
  • 原文地址:https://www.cnblogs.com/sunLemon/p/9579974.html
Copyright © 2011-2022 走看看