123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299 |
- <template>
- <view
- class="u-subsection"
- ref="u-subsection"
- :class="[`u-subsection--${mode}`]"
- :style="[$u.addStyle(customStyle), wrapperStyle]"
- >
- <view
- class="u-subsection__bar"
- ref="u-subsection__bar"
- :style="[barStyle]"
- :class="[
- mode === 'button' && 'u-subsection--button__bar',
- current === 0 &&
- mode === 'subsection' &&
- 'u-subsection__bar--first',
- current > 0 &&
- current < list.length - 1 &&
- mode === 'subsection' &&
- 'u-subsection__bar--center',
- current === list.length - 1 &&
- mode === 'subsection' &&
- 'u-subsection__bar--last',
- ]"
- ></view>
- <view
- class="u-subsection__item"
- :class="[
- `u-subsection__item--${index}`,
- index < list.length - 1 &&
- 'u-subsection__item--no-border-right',
- index === 0 && 'u-subsection__item--first',
- index === list.length - 1 && 'u-subsection__item--last',
- ]"
- :ref="`u-subsection__item--${index}`"
- :style="[itemStyle(index)]"
- @tap="clickHandler(index)"
- v-for="(item, index) in list"
- :key="index"
- >
- <text
- class="u-subsection__item__text"
- :style="[textStyle(index)]"
- >{{ getText(item) }}</text
- >
- </view>
- </view>
- </template>
- <script>
- const dom = uni.requireNativePlugin("dom");
- const animation = uni.requireNativePlugin("animation");
- import props from "./props.js";
- export default {
- name: "u-subsection",
- mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
- data() {
- return {
-
- itemRect: {
- width: 0,
- height: 0,
- },
- };
- },
- watch: {
- list(newValue, oldValue) {
- this.init();
- },
- current: {
- immediate: true,
- handler(n) {
-
-
-
- const ref = this.$refs?.["u-subsection__bar"]?.ref;
-
- uni.$u.sleep(ref ? 0 : 100).then(() => {
- animation.transition(this.$refs["u-subsection__bar"].ref, {
- styles: {
- transform: `translateX(${
- n * this.itemRect.width
- }px)`,
- transformOrigin: "center center",
- },
- duration: 300,
- });
- });
-
- },
- },
- },
- computed: {
- wrapperStyle() {
- const style = {};
-
- if (this.mode === "button") {
- style.backgroundColor = this.bgColor;
- }
- return style;
- },
-
- barStyle() {
- const style = {};
- style.width = `${this.itemRect.width}px`;
- style.height = `${this.itemRect.height}px`;
-
-
- style.transform = `translateX(${
- this.current * this.itemRect.width
- }px)`;
-
- if (this.mode === "subsection") {
-
- style.backgroundColor = this.activeColor;
- }
- return style;
- },
-
- itemStyle(index) {
- return (index) => {
- const style = {};
- if (this.mode === "subsection") {
-
- style.borderColor = this.activeColor;
- style.borderWidth = "1px";
- style.borderStyle = "solid";
- }
- return style;
- };
- },
-
- textStyle(index) {
- return (index) => {
- const style = {};
- style.fontWeight =
- this.bold && this.current === index ? "bold" : "normal";
- style.fontSize = uni.$u.addUnit(this.fontSize);
-
- if (this.mode === "subsection") {
- style.color =
- this.current === index ? "#fff" : this.inactiveColor;
- } else {
-
- style.color =
- this.current === index
- ? this.activeColor
- : this.inactiveColor;
- }
- return style;
- };
- },
- },
- mounted() {
- this.init();
- },
- methods: {
- init() {
- uni.$u.sleep().then(() => this.getRect());
- },
-
- getText(item) {
- return typeof item === 'object' ? item[this.keyName] : item
- },
-
- getRect() {
-
- this.$uGetRect(".u-subsection__item--0").then((size) => {
- this.itemRect = size;
- });
-
-
- const ref = this.$refs["u-subsection__item--0"][0];
- ref &&
- dom.getComponentRect(ref, (res) => {
- this.itemRect = res.size;
- });
-
- },
- clickHandler(index) {
- this.$emit("change", index);
- },
- },
- };
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/components.scss";
- .u-subsection {
- @include flex;
- position: relative;
- overflow: hidden;
- /* #ifndef APP-NVUE */
- width: 100%;
- box-sizing: border-box;
- /* #endif */
- &--button {
- height: 32px;
- background-color: rgb(238, 238, 239);
- padding: 3px;
- border-radius: 3px;
- align-items: stretch;
- &__bar {
- background-color: #ffffff;
- border-radius: 3px !important;
- }
- }
- &--subsection {
- height: 30px;
- }
- &__bar {
- position: absolute;
- /* #ifndef APP-NVUE */
- transition-property: transform, color;
- transition-duration: 0.3s;
- transition-timing-function: ease-in-out;
- /* #endif */
- &--first {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
- }
- &--center {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
- border-top-right-radius: 0px;
- border-bottom-right-radius: 0px;
- }
- &--last {
- border-top-left-radius: 0px;
- border-bottom-left-radius: 0px;
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- }
- }
- &__item {
- @include flex;
- flex: 1;
- justify-content: center;
- align-items: center;
- // vue环境下,需要设置相对定位,因为滑块为绝对定位,item需要在滑块的上面
- position: relative;
- &--no-border-right {
- border-right-width: 0 !important;
- }
- &--first {
- border-top-left-radius: 3px;
- border-bottom-left-radius: 3px;
- }
- &--last {
- border-top-right-radius: 3px;
- border-bottom-right-radius: 3px;
- }
- &__text {
- font-size: 12px;
- line-height: 12px;
- @include flex;
- align-items: center;
- transition-property: color;
- transition-duration: 0.3s;
- }
- }
- }
- </style>
|