Commit 03b94183 authored by Nature's avatar Nature

s-tab

parent 9d77b282
...@@ -4,5 +4,5 @@ ...@@ -4,5 +4,5 @@
@import "ionic"; @import "ionic";
@import 'publicStyle'; @import 'publicStyle';
@import "ionic-public-style"; @import "ionic-public-style";
@import "platform-iosx";
@import "platform-ios"; @import "platform-ios";
@import "platform-iosx";
...@@ -36,19 +36,20 @@ export default { ...@@ -36,19 +36,20 @@ export default {
.h-view { .h-view {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
// background-color: $bgColor; // background-color: $bgColor;
} }
// iPhoneX适配 // iPhoneX适配
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) { @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
.h-view{ .h-ios{
padding-bottom: 42px; padding-bottom: 42px;
} }
} }
// iPhoneX Max适配 // iPhoneX Max适配
@media only screen and (device-width: 414px) and (device-height: 896px) { @media only screen and (device-width: 414px) and (device-height: 896px) {
.h-view{ .h-ios{
padding-bottom: 42px; padding-bottom: 42px;
} }
} }
......
<template> <template>
<section :class="[c(),tabCss, cusClass,overFlow]"> <section :class="[c(),tabCss, cusClass,overFlow]" >
<section :style="transform" class="tab-content"> <section :style="transform" class="tab-content">
<slot/> <slot/>
</section> </section>
...@@ -32,7 +32,7 @@ export default { ...@@ -32,7 +32,7 @@ export default {
}, },
overflowX: { overflowX: {
type: Boolean, type: Boolean,
default: false, default: true,
}, },
}, },
data () { data () {
...@@ -40,7 +40,6 @@ export default { ...@@ -40,7 +40,6 @@ export default {
items: [], items: [],
length: '', length: '',
activedIndex: '', activedIndex: '',
deviceWidth: window.innerWidth,
translate: 0, translate: 0,
} }
}, },
...@@ -69,6 +68,7 @@ export default { ...@@ -69,6 +68,7 @@ export default {
transform () { transform () {
return { return {
transform: 'translateX(' + this.translate + 'px' + ')', transform: 'translateX(' + this.translate + 'px' + ')',
// transition: 'right 0.3s cubic-bezier(0.35, 0, 0.25, 1), left 0.3s cubic-bezier(0.35, 0, 0.25, 1) 0.09s;',
} }
}, },
}, },
...@@ -86,18 +86,22 @@ export default { ...@@ -86,18 +86,22 @@ export default {
}, },
scrollToActiveTab (index, width) { scrollToActiveTab (index, width) {
let clientWidth = this.$el.clientWidth
index += 1 index += 1
let vm = this let vm = this
let count = Math.floor(vm.deviceWidth / width) let count = Math.floor(clientWidth / width)
let overFlowWidth = vm.deviceWidth - count * width let overFlowWidth = clientWidth - count * width
let num let num
if (index > count) { if (index > count) {
num = index - count num = index - count
if ((vm.count - index) >= 1) {
num += 1
}
} else { } else {
num = 0 num = 0
} }
if (num === 0) { if (num === 0) {
vm.translate = -num * width vm.translate = 0
} else { } else {
vm.translate = -num * width + overFlowWidth vm.translate = -num * width + overFlowWidth
} }
...@@ -113,7 +117,7 @@ export default { ...@@ -113,7 +117,7 @@ export default {
.hls-switch-tab { .hls-switch-tab {
width: 100%; width: 100%;
position: absolute; // position: absolute;
z-index: 1; z-index: 1;
display: flex; display: flex;
// justify-content: space-around; // justify-content: space-around;
...@@ -121,7 +125,7 @@ export default { ...@@ -121,7 +125,7 @@ export default {
background-color: #fff; background-color: #fff;
&-top { &-top {
top: 0; // top: 0;
&:after { &:after {
.setBottomLine(); .setBottomLine();
...@@ -129,7 +133,7 @@ export default { ...@@ -129,7 +133,7 @@ export default {
} }
&-bottom { &-bottom {
bottom: 0; // bottom: 0;
&:before { &:before {
.setTopLine(); .setTopLine();
......
...@@ -69,7 +69,7 @@ export default { ...@@ -69,7 +69,7 @@ export default {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 3px; // padding: 0 3px;
border-bottom: 1px solid rgba(255, 255, 255, .0); /*no*/ border-bottom: 1px solid rgba(255, 255, 255, .0); /*no*/
} }
......
...@@ -215,7 +215,7 @@ ...@@ -215,7 +215,7 @@
self.platforms = [] self.platforms = []
var grade = 'a' var grade = 'a'
if (self.isWebView()) { /*if (self.isWebView()) {
self.platforms.push('webview') self.platforms.push('webview')
if (!(!window.cordova && !window.PhoneGap && !window.phonegap)) { if (!(!window.cordova && !window.PhoneGap && !window.phonegap)) {
self.platforms.push('cordova') self.platforms.push('cordova')
...@@ -225,13 +225,13 @@ ...@@ -225,13 +225,13 @@
} else { } else {
self.platforms.push('browser') self.platforms.push('browser')
} }
if (self.isIPad()) self.platforms.push('ipad') if (self.isIPad()) self.platforms.push('ipad')*/
var platform = self.platform() var platform = self.platform()
if (platform) { if (platform) {
self.platforms.push(platform) self.platforms.push(platform)
var version = self.version() /*var version = self.version()
if (version) { if (version) {
var v = version.toString() var v = version.toString()
if (v.indexOf('.') > 0) { if (v.indexOf('.') > 0) {
...@@ -247,10 +247,10 @@ ...@@ -247,10 +247,10 @@
} else if (self.isWindowsPhone()) { } else if (self.isWindowsPhone()) {
grade = 'b' grade = 'b'
} }
} }*/
} }
self.setGrade(grade) // self.setGrade(grade)
}, },
/** /**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment