이 글의 내용은 WeChat 애플릿의 하단 타르바를 사용자 정의하는 코드 구현에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.
먼저 디렉토리를 살펴보세요
탭바 템플릿은 템플릿 폴더에 저장되어 있습니다.
template/template.wxml
<template name="tabBar"> <view class="tabBar"> <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar"> <view class="tabBar-item"> <navigator open-type="redirect" url="{{item.pagePath}}"> <view><image class="icon" src='{{item.iconPath}}'></image></view> <view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view> </navigator> </view> </block> </view> </template>
template.css
.icon{ width:54rpx; height: 54rpx; } .tabBar{ width:100%; position: fixed; bottom:0; padding:10rpx; margin-left:-4rpx; background:#F7F7FA; font-size:20rpx; color:#8A8A8A; box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa; } .tabBar-item{ float:left; width:25%; text-align: center; overflow: hidden; } /*当前字体颜色*/ .tabBartext{ color:red; }
template.js
//初始化数据 function tabbarinit() { return [ { "current":0, "pagePath": "/pages/index/index", "iconPath": "/imgs/home.png", "selectedIconPath": "/imgs/home_on.png", "text": "主页" }, { "current": 0, "pagePath": "/pages/news/news", "iconPath": "/imgs/message.png", "selectedIconPath": "/imgs/message_on.png", "text": "资讯" }, { "current": 0, "pagePath": "/pages/category/category", "iconPath": "/imgs/category.png", "selectedIconPath": "/imgs/category_on.png", "text": "分类" }, { "current": 0, "pagePath": "/pages/buy/buy", "iconPath": "/imgs/buy.png", "selectedIconPath": "/imgs/buy_on.png", "text": "购物" } ] } //tabbar 主入口 function tabbarmain(bindName = "tabdata", id, target) { var that = target; var bindData = {}; var otabbar = tabbarinit(); otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//换当前的icon otabbar[id]['current'] = 1; bindData[bindName] = otabbar that.setData({ bindData }); } module.exports = { tabbar: tabbarmain }
이것으로 컴포넌트 수정이 완료되고, 사용법을 설명합니다.
먼저 스타일을 index 폴더의 app.wxss
@import "/template/template.wxss";
에 로드합니다.
index.wxml
<import src="../../template/template.wxml"/> <template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>
index.js
const app = getApp() var template = require('../../template/template.js'); Page({ data: { }, onLoad: function () { template.tabbar("tabBar", 0, this)//0表示第一个tabbar }, })
news.wxml은 index.wxml과 동일합니다.
news.js는 다음과 같습니다
const app = getApp() var template = require('../../template/template.js'); Page({ data: { }, onLoad: function () { template.tabbar("tabBar", 1, this)//1表示第二个tabbar }, })
효과는 그림과 같습니다
관련 추천:
WeChat 애플릿 예: 탐색 모음이 함께 움직일 때 상단 탭 전환 및 슬라이딩 전환 효과 실현(코드)
WeChat 애플릿 예: 도시 위치 및 재승인된 지리적 위치의 현재 코드 구현을 가져옵니다
위 내용은 하단 타르바를 사용자 정의하는 WeChat 애플릿의 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!