하단 타르바를 사용자 정의하는 WeChat 애플릿의 코드 구현

不言
풀어 주다: 2018-08-10 14:41:34
원래의
6049명이 탐색했습니다.

이 글의 내용은 WeChat 애플릿의 하단 타르바를 사용자 정의하는 코드 구현에 관한 것입니다. 필요한 친구들이 참고할 수 있기를 바랍니다.

먼저 디렉토리를 살펴보세요
하단 타르바를 사용자 정의하는 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=&#39;{{item.iconPath}}&#39;></image></view>
        <view class="{{item.current== 1 ? &#39;tabBartext&#39; :&#39;&#39;}}">{{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][&#39;iconPath&#39;] = otabbar[id][&#39;selectedIconPath&#39;]//换当前的icon
  otabbar[id][&#39;current&#39;] = 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(&#39;../../template/template.js&#39;);
Page({
  data: {

  },
  onLoad: function () {
    template.tabbar("tabBar", 0, this)//0表示第一个tabbar
  },
})
로그인 후 복사

news.wxml은 index.wxml과 동일합니다.
news.js는 다음과 같습니다

const app = getApp()
var template = require(&#39;../../template/template.js&#39;);
Page({
  data: {  },

  onLoad: function () {
    template.tabbar("tabBar", 1, this)//1表示第二个tabbar
  },

})
로그인 후 복사

효과는 그림과 같습니다
하단 타르바를 사용자 정의하는 WeChat 애플릿의 코드 구현

관련 추천:

WeChat 애플릿 예: 탐색 모음이 함께 움직일 때 상단 탭 전환 및 슬라이딩 전환 효과 실현(코드)

WeChat 애플릿 예: 도시 위치 및 재승인된 지리적 위치의 현재 코드 구현을 가져옵니다

위 내용은 하단 타르바를 사용자 정의하는 WeChat 애플릿의 코드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!