प्रौद्योगिकी साझेदारी

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

WeChat लघु कार्यक्रमे अनुकूलनं कार्यान्वितं कुर्वन्तु tabBar एतत् भवतः अनुप्रयोगाय अधिकं लचीलं व्यक्तिगतं च अधः नेविगेशन मेनू प्रदातुं शक्नोति ।आधिकारिकस्य WeChat लघु कार्यक्रमस्य कारणात्tabBar सीमितविन्यासक्षमता, अनुकूलनम्tabBar जटिलतलमार्गदर्शनं कार्यान्वितुं अनेकेषां विकासकानां विकल्पः अभवत् ।लघुकार्यक्रमे अनुकूलनं कथं कार्यान्वितुं शक्यते इति सरलं उदाहरणं निम्नलिखितम् अस्तिtabBar。

Step 1: app.json विन्यस्तं कुर्वन्तु

प्रथमं भवतः आवश्यकता अस्ति app.json मध्यम विन्यासtabBar मूलभूतसूचना, परन्तुcustom क्षेत्रं सेट् करणीयम् अस्तिtrue अनुकूलनं सक्षमं कर्तुंtabBar。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/profile/profile"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的"
      }
    ],
    "custom": true,
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

Step 2: कस्टम् tabBar घटकं रचयन्तु

नामकं सञ्चिकां रचयन्तु custom-tab-bar फोल्डर् कृत्वा तस्मिन् आवश्यकानि सञ्चिकानि रचयन्तु (उदा.index.js、index.json、index.wxml、index.wxss）。

अनुक्रमणिका.ज

अत्र तर्कः संसाधितुं शक्यते, यथा वर्तमानपृष्ठस्य आधारेण ट्याब्स् स्विचिंग् ।

Component({
  data: {
    selected: 0,
    list: [{
      pagePath: '/pages/index/index',
      text: '首页'
    }, {
      pagePath: '/pages/logs/logs',
      text: '日志'
    }, {
      pagePath: '/pages/profile/profile',
      text: '我的'
    }]
  },
  methods: {
    switchTab: function(e) {
      const data = e.currentTarget.dataset;
      if (this.data.selected === data.index) return;
      wx.switchTab({url: data.path});
    },
    onShow: function(e) {
      // 当 tabBar 显示时触发，可以根据需要获取当前页面路径
      const { path } = getCurrentPages().pop();
      this.setData({
        selected: this.data.list.findIndex(tab => tab.pagePath === path)
      });
    }
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

index.json इति

घटकस्य विन्याससूचना परिभाषयन्तु ।

{
  "usingComponents": {}
}
1
2
3

अनुक्रमणिका.wxml

tabBar इत्यस्य संरचनां परिभाषयन्तु ।

<view class="tab-bar">
  <block wx:for="{{list}}" wx:key="index" wx:for-index="idx">
    <view class="tab-item {{selected === idx ? 'active' : ''}}" data-path="{{item.pagePath}}" data-index="{{idx}}" bindtap="switchTab">
      {{item.text}}
    </view>
  </block>
</view>
1
2
3
4
5
6
7

अनुक्रमणिका.wxss

शैलीं योजयन्तु।

.tab-bar {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
}

.tab-item {
  padding: 10px 0;
  text-align: center;
}

.tab-item.active {
  color: #3cc51f;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Step 3: app.js इत्यस्मिन् custom tabBar इत्यस्य उपयोगं कुर्वन्तु

अस्ति app.js कस्टम् tabBar घटकस्य परिचयं कृत्वा उपयोगं कुर्वन्तु ।

App({
  onLaunch: function () {
    // 在这里可以执行一些启动时的逻辑
  },
  usingComponents: {
    '不同角色，控制查看底部菜单权限
    实现效果1：实体店![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/2ca6098eefaf4d55935d9eb8d44116fb.png)
实现效果2：回收公司
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/da1d7b225c064d3ab058176211f65833.png)

1
2
3
4
5
6
7
8
9
10