微信小程序Skyline模式自定义tab组件胶囊与原生胶囊平齐，安卓和ios均自适 ...

进入下面小程序可以体验结果：
 

APP.JS 

1. // app.js
2. App({
3.   onLaunch() {
4.       ;(async ()=>{
5.             const systemInfo = wx.getSystemInfoSync()
6.             this.globalData.system = systemInfo
7.             const menuInfo = wx.getMenuButtonBoundingClientRect()
8.             this.globalData.menu = menuInfo
9.       })()
10.   },
11.   
12.   globalData: {
13.     system:{},
14.     menu:{}
15.   },
17. })

复制代码

至于原理的话，解释起来究竟贫困，各位可以看源码本身分析。实在很简单，就算计算结构。许多网上公布的结构，都不能正常自适应。在下这个是完美可以的 
1、WXML 

1. <view class="nav-main navview leftview">
2.     <view class="nav-back-home barview capsule">
3.         <view class="nav-goback" bindtap="back">
4.             <image src="data:image/png;base64,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" class="img"></image>
5.         </view>
6.         <view class="shu-p">
7.             <view class="shu"></view>
8.         </view>
9.         <view class="nav-home" bindtap="home">
10.             <image src="data:image/png;base64,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" class="img"></image>
11.         </view>
12.     </view>
13. </view>

复制代码

2、WXSS

1. .nav-main{
2.     width:100%;
3.     padding-bottom: 16rpx;
4.     padding-right: 24rpx;
5. }
7. .nav-back-home{
8.     display: flex;
9.     flex-direction: row;
10.     justify-content: center;
11.     align-items: center;
12.     border-radius: 50rpx;
13. }
15. .nav-goback,.nav-home{
16.     align-items: center;
17.     display: flex;
18.     height: 100%;
19. }
21. .nav-goback .img{
22.     width: 50rpx;
23.     height: 50rpx;
24.     margin-top: -5rpx;
25.     margin-left: -5rpx;
26. }
28. .nav-home .img{
29.     width: 40rpx;
30.     height: 40rpx;
31. }
33. .capsule{
34.   border: 1rpx solid #c0c4c5;background: rgba(255, 255, 255,0.65);
35. }
37. .shu-p{
38.     width: 15%;
39.     height: 50%;
40.     display: flex;
41.     align-items: center;
42.     justify-content: center;
43.     margin: 5rpx;
44. }
46. .shu{
47.     border: 0.5rpx solid #cececec7;
48.     width: 1%;
49.     height: 100%;
50. }
52. .weui-loading {
53.   font-size: 16px;
54.   width: 16px;
55.   height: 16px;
56.   display: block;
57.   background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
58.   background-size: 100%;
59.   margin-left: 0;
60.   animation: loading linear infinite 1s;
61. }
63. @keyframes loading {
64.   from {
65.     transform: rotate(0);
66.   }
67.   to {
68.     transform: rotate(360deg);
69.   }
70. }

复制代码

 3、JS

1. const {shared} = wx.worklet
2. let app = getApp()
3. Component({
4.   options: {
5.     multipleSlots: true // 在组件定义时的选项中启用多slot支持
6.   },
7.   /**
8.    * 组件的属性列表
9.    */
10.   properties: {
11.     back: {
12.       type: Boolean,
13.       value: false
14.     },
15.     homeButton: {
16.       type: Boolean,
17.       value: false,
18.     },
19.     searchButton: {
20.         type: Boolean,
21.         value: false,
22.     },
23.     animated: {
24.       // 显示隐藏的时候opacity动画效果
25.       type: Boolean,
26.       value: true
27.     },
28.     show: {
29.       // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
30.       type: Boolean,
31.       value: true,
32.       observer: '_showChange'
33.     },
34.     // back为true的时候，返回的页面深度
35.     delta: {
36.       type: Number,
37.       value: 1
38.     },
39.   },
40.   /**
41.    * 组件的初始数据
42.    */
43.   data: {
44.     displayStyle:''
45.   },
46.   lifetimes: {
47.     created(){
48.         this.saftPadding = shared(0)
49.         this.barheight = shared(0)
50.         this.barWidth = shared(0)
51.         this.barMarginLeft = shared(0)
52.     },
53.     attached() {
54.         this.applyAnimatedStyle('.navview', () => {
55.             'worklet'
56.             return {paddingTop: `${this.saftPadding.value}px` }
57.         })
58.         this.applyAnimatedStyle('.barview', () => {
59.             'worklet'
60.             return {height: `${this.barheight.value}px` }
61.         })
62.         this.applyAnimatedStyle('.barview', () => {
63.             'worklet'
64.             return {width: `${this.barWidth.value}px` }
65.         })
66.         this.applyAnimatedStyle('.leftview', () => {
67.             'worklet'
68.             return {marginLeft: `${this.barMarginLeft.value}px` }
69.         })
70.         wx.nextTick(()=>{
71.             //胶囊顶部位置（安全位置）
72.             this.saftPadding.value = app.globalData.menu.top
73.             //胶囊高度
74.             this.barheight.value = app.globalData.menu.height
75.             //胶囊宽度
76.             this.barWidth.value = app.globalData.menu.width
77.             //胶囊左边距
78.             this.barMarginLeft.value = app.globalData.system.windowWidth-app.globalData.menu.right
79.         })
80.     },
81.   },
82.   /**
83.    * 组件的方法列表
84.    */
85.   methods: {
86.     _showChange(show) {
87.       const animated = this.data.animated
88.       let displayStyle = ''
89.       if (animated) {
90.         displayStyle = `opacity: ${
91.           show ? '1' : '0'
92.         };transition:opacity 0.5s;`
93.       } else {
94.         displayStyle = `display: ${show ? '' : 'none'}`
95.       }
96.       this.setData({
97.         displayStyle
98.       })
99.     },
100.     back() {
101.       const data = this.data
102.       if (data.delta) {
103.         wx.navigateBack({
104.           delta: data.delta
105.         })
106.       }
107.       this.triggerEvent('back', { delta: data.delta }, {})
108.     }
109.   },
110. })

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。