btxui 1.0.2 → 1.0.3

package/components/BTXUI/slider/slider-wid.vue

@@ -1,444 +0,0 @@
-<template>
-    <b-view :styles="`rel h-${view.height} bg-color-${view.bg_color}`"
-            @on_enter="stop_auto_play"
-            @on_leave="auto_play_data.enable && auto_play()">
-
-        <!--轮播内容-->
-        <b-view :styles="`rel no-scroll h-${view.height}`">
-            <b-view ref="sliderBar"
-                    :styles="`flex touch-none h-${view.height}`"
-                    :dynamic="`w-${slider_bar_width}px translateX-${this.touch_point.x.toString().replace('-', 'f')}px ${this.flip_ani? 'trans-fast': 'trans-no'}`"
-                    @on_touchstart="$_touch_start"
-                    @on_touchmove="$_touch_move"
-                    @on_touchend="$_touch_end"
-                    @on_transitionend="$_flip_over">
-                <b-list v-for="page of slider_pages" :key="page.id"
-                        styles="grow-1"
-                        :go-top-btn="goTopBtn"
-                        :state="page.state">
-                    <slot :name="page.id"></slot>
-                </b-list>
-            </b-view>
-        </b-view>
-
-        <!--计数点-->
-        <b-view :styles="`flex-5 abs z1 max-w h-0 b-${showDot.bottom}`" v-if="showDot">
-            <b-hot v-for="(page,index) of slider_pages" :key="index"
-                   :styles="`round mrg-h-.5 w-.5 h-.5 bg-color-${showDot.color}`"
-                   :states="{
-                        act: {
-                            style: `bg-color-${showDot.act_color}`,
-                            state: page.state === 'act'
-                        }
-                   }"
-                   @on_click="$_dot_click(index + 1)"
-                   :data-s="page.state"
-                   :data-page="index + 1">
-            </b-hot>
-        </b-view>
-
-        <!--切换按钮-->
-        <template v-if="show_flip_btn" >
-            <b-hot styles="round bg-color-neutral translateY-f50 flex-5 abs t-50% l-1 w-4 h-4 fsize-2"
-                   hover="bg-color-rgba(255,255,255,.4)"
-                   @on_click="prev">
-                <b-icon icon="arrow-left" />
-            </b-hot>
-            <b-hot styles="round bg-color-neutral translateY-f50 flex-5 abs t-50% r-1 w-4 h-4 fsize-2"
-                   hover="bg-color-rgba(255,255,255,.4)"
-                   @on_click="next">
-                <b-icon icon="arrow-right" />
-            </b-hot>
-        </template>
-
-    </b-view>
-</template>
-
-<script>
-    import BView from "@/components/BTXUI/core/b-view"
-    import BHot from "@/components/BTXUI/core/b-hot"
-    import BIcon from "@/components/BTXUI/core/b-icon"
-    import BList from "@/components/BTXUI/core/b-list"
-
-    const desc = ["该组件用于设置内容轮播，支持页面 resize 时自动校正尺寸。",{
-            cover: "slider-wid.png",
-            title: "轮播执行机制原理"
-        }],
-        extend = [],
-        dependent = ["b-list", "b-hot", "b-icon", "b-view"],
-        api = {
-            event: [
-                {
-                    name: "on_flip",
-                    ef: "分页完成",
-                    params: "cur_page"
-                },
-                {
-                    name: "on_load",
-                    ef: "分页结构生成",
-                    params: "-"
-                }
-            ],
-            methods: [
-                {
-                    name: "prev",
-                    ef: "向前翻页",
-                    params: "flip_ani",
-                    return: "-"
-                },
-                {
-                    name: "next",
-                    ef: "向后翻页",
-                    params: "flip_ani",
-                    return: "-"
-                },
-                {
-                    name: "flip",
-                    ef: "翻页",
-                    params: "page, flip_ani",
-                    return: "-"
-                },
-                {
-                    name: "auto_play",
-                    ef: "自动播放",
-                    params: "restart",
-                    return: "-"
-                },
-                {
-                    name: "stop_auto_play",
-                    ef: "停止自动播放",
-                    params: "-",
-                    return: "-"
-                },
-                {
-                    name: "forbid_touch",
-                    ef: "禁止触控滑动",
-                    params: "if_forbid",
-                    return: "-"
-                }
-            ]
-        },
-        init_data = `{
-        pages: [
-            {
-                id: "内容标识"
-            },...
-        ],
-        /* view: {
-            height: "轮播器高度（默认为 auto，由内容撑起）",
-            bg_color: "轮播器背景色（默认为透明）"
-        } */,
-        /* showDot: {
-            bottom: "底边位移",
-            color: "点颜色",
-            act_color: "点激活颜色"
-        } */,
-        /* showFlipBtn: "显示切换按钮" */,
-        /* autoPlayDuration: "自动播放时间间隔（毫秒）" */,
-        /* loop: "是否循环播放" */,
-        /* keyboardFlip: "是否启用键盘切换" */,
-        /* goTopBtn: "(参照：b-list 组件 goTopBtn 入参)" */
-    }`;
-
-    export default {
-        name: "slider-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BHot,
-            BIcon,
-            BView,
-            BList
-        },
-        props: {
-            pages: {
-                type: Array,
-                required: true
-            },
-            view: {
-                type: Object,
-                required: false,
-                default: ()=>{
-                    return {
-                        height: "auto",
-                        bg_color: "none"
-                    }
-                }
-            },
-            showDot: {
-                type: Object,
-                required: false
-            },
-            showFlipBtn: {
-                type: Boolean,
-                required: false
-            },
-            autoPlayDuration: {
-                type: Number,
-                required: false
-            },
-            loop: {
-                type: Boolean,
-                required: false
-            },
-            keyboardFlip: {
-                type: Boolean,
-                required: false
-            },
-            goTopBtn: {
-                type: Object,
-                required: false
-            }
-        },
-        data(){
-            return {
-
-                //数据分页
-                slider_pages: [],
-
-                //滑动条宽度
-                slider_bar_width: 0,
-
-                //索引指针
-                point: {
-                    prev: 0,
-                    cur: 0,
-                },
-
-                //是否自动播放
-                auto_play_data: {
-                    enable: false,
-                    interval: 0
-                },
-
-                //触控点
-                touch_point: {
-                    start: 0,
-                    left: 0,
-                    x: 0,
-                    threshold: 2,
-                    offset: 0,
-                    direction: {
-                        enable: true,
-                        offset: false,
-                        dir: null
-                    }
-                },
-
-                //翻页缓动
-                flip_ani: true,
-
-                //滑动启用状态
-                touch_move_enable: true,
-
-                //是否显示翻页按钮
-                show_flip_btn: false
-
-            }
-        },
-        computed: {
-
-            //轮播容器
-            slider_bar(){
-                return this.$refs.sliderBar;
-            }
-
-        },
-        methods: {
-
-            //向前翻页
-            prev(flip_ani){
-                this.flip(this.point.cur, flip_ani);
-            },
-
-            //向后翻页
-            next(flip_ani){
-                this.flip(this.point.cur + 2, flip_ani);
-            },
-
-            //翻页
-            flip(page, flip_ani=true){
-                let page_len = this.slider_pages.length;
-
-                //设置播放模式（point:索引，page:页码）
-                if(this.loop){//循环
-                    if(page < 1){
-                        this.point.cur = page_len - 1;
-                    }else if(page > page_len){
-                        this.point.cur = 0;
-                    }else{
-                        this.point.cur = page - 1;
-                    }
-                }else{//定向
-                    this.point.cur = Math.min(page_len - 1, Math.max(0, page - 1));
-                }
-                this.touch_point.x = this.touch_point.left = -this.point.cur * this.$el.clientWidth; //位移
-
-                //设置分页激活状态
-                if(this.point.prev !== this.point.cur){
-                    let cur_page_data = this.slider_pages[this.point.cur];
-                    this.slider_pages[this.point.prev].state = "";
-                    cur_page_data.state = "act";
-                    this.point.prev = this.point.cur;
-                }
-
-                //设置分页缓动
-                !flip_ani && this.$emit("on_flip", this.point.cur + 1);
-                this.flip_ani = flip_ani;
-            },
-
-            //自动播放
-            auto_play(restart){
-                this.auto_play_data.interval = setInterval(()=>{
-                    restart? this.flip(1): this.next(true);
-                }, this.auto_play_data.duration)
-            },
-
-            //停止自动播放
-            stop_auto_play(){
-                clearInterval(this.auto_play_data.interval);
-            },
-
-            //禁止触控滑动
-            forbid_touch(if_forbid){
-                this.touch_move_enable = if_forbid === true? false: true;
-            },
-
-            //初始化组件数据
-            $_init_data(){
-                this.point = {
-                    prev: 0,
-                    cur: 0
-                };
-                this.show_flip_btn = this.showFlipBtn;
-                this.slider_pages = this.pages.map((data, i) => {
-                    return {
-                        id: data.id,
-                        state: i==0?"act":""
-                    };
-                })
-                this.$_set_slider_bar_width();
-                this.$_init_auto_play();
-                if(this.keyboardFlip) this.$_bind_keyboard_flip_event();
-
-                //分页结构生成
-                this.$nextTick(()=>{
-                    this.$emit("on_load");
-                })
-
-            },
-
-            //初始化自动播放
-            $_init_auto_play(){
-                let duration = this.autoPlayDuration;
-                if(duration){
-                    this.auto_play_data = {
-                        enable: true,
-                        duration: duration,
-                        interval: null,
-                    };
-                    this.auto_play();
-                }
-            },
-
-            //触控开始手势
-            $_touch_start(e){
-                this.touch_point.start = e.touches[0].pageX;
-                this.touch_point.direction.enable = true;
-                this.flip_ani = false;
-                this.stop_auto_play();
-            },
-
-            //触控结束手势
-            $_touch_end(){
-                this.$_flip_as_threshold();
-                this.auto_play_data.enable && this.auto_play()
-            },
-
-            //触控滑动手势
-            $_touch_move(e){
-                if(this.touch_move_enable){
-                    let touch = e.touches[0],
-                        touch_point = this.touch_point,
-                        offset;
-                    this.$_flip_direction(touch, touch_point);
-                    if(touch_point.direction.dir === "horizontal"){
-                        touch_point.offset = offset = touch.pageX - touch_point.start;
-                        e.cancelable && e.preventDefault();
-                        touch_point.x = touch_point.left + offset;
-                    }
-                }
-            },
-
-            //触控分页阈值处理
-            $_flip_as_threshold(){
-                let touch_point = this.touch_point;
-                if(touch_point.offset !== 0){ //无位移,不执行
-                    let flip = Math.abs(touch_point.x / this.$el.clientWidth),
-                        flip_dir = touch_point.x < touch_point.left? "left": "right",
-                        page = this.point.cur + 1,
-                        overflow_x = flip.toString().split(".")[1][0];
-                    if(flip_dir === "right" && overflow_x < 10 - touch_point.threshold){//向右滑动:上一页
-                        page--;
-                    }else if(flip_dir === "left" && overflow_x >= touch_point.threshold){//向左滑动:下一页
-                        page++;
-                    }
-                    this.flip(page, true);
-                    touch_point.offset = 0;
-                }
-            },
-
-            //滑动结束
-            $_flip_over(){
-                this.$emit("on_flip", this.point.cur + 1);
-            },
-
-            //滑动方向判断
-            $_flip_direction(touch, touch_point){
-                let direction = touch_point.direction;
-                if(direction.enable){
-                    if(direction.offset){ //方向判断
-                        let offset_x = Math.abs(touch.pageX - direction.x),
-                            offset_y = Math.abs(touch.pageY - direction.y);
-                        direction.dir = offset_x >= offset_y? "horizontal": "vertical";
-                        direction.offset = direction.enable = false;
-                    }else{ //定位起始坐标
-                        direction.x = touch.pageX;
-                        direction.y = touch.pageY;
-                        direction.offset = true;
-                    }
-                }
-            },
-
-            //计数点点击
-            $_dot_click(page){
-                this.flip(page, true);
-            },
-
-            //绑定键盘翻页事件
-            $_bind_keyboard_flip_event(){
-                window.addEventListener("keyup", (e) => {
-                    if(e.key === "ArrowLeft") this.prev(".54s");
-                    if(e.key === "ArrowRight") this.next(".54s");
-                });
-            },
-
-            //设置 slider_bar 宽度
-            $_set_slider_bar_width(){
-                this.slider_bar_width = this.slider_pages.length * this.$el.clientWidth;
-            }
-
-        },
-        watch: {
-            pages(){
-                this.$_init_data();
-            }
-        },
-        mounted(){
-            this.$_init_data();
-            window.addEventListener("resize", this.$_set_slider_bar_width)
-        },
-        destroyed(){
-            window.removeEventListener("resize", this.$_set_slider_bar_width);
-        }
-    }
-</script>

package/components/BTXUI/tab/tab-wid.vue

@@ -1,109 +0,0 @@
-<template>
-    <b-view>
-        <b-view styles="rel t-2px">
-            <tags-wid v-bind="tags_data" v-model="cur_tab"/>
-        </b-view>
-        <b-view styles="rel">
-            <slider-wid :pages="tags_data.tagList" ref="slider"
-                        @on_flip="$_page_flip"
-                        @on_load="$_init_page">
-                <slot v-for="page of tags_data.tagList"
-                      :slot="page.id"
-                      :name="page.id" />
-            </slider-wid>
-        </b-view>
-    </b-view>
-</template>
-
-<script>
-    import BView from "@/components/BTXUI/core/b-view"
-    import BText from "@/components/BTXUI/core/b-text"
-    import TagsWid from "@/components/BTXUI/tags/tags-wid"
-    import SliderWid from "@/components/BTXUI/slider/slider-wid"
-
-    let desc = ["该组件用于进行标签切换交互操作。"],
-        extend = [],
-        dependent = ["slider-wid", "tags-wid", "b-text", "b-view"],
-        api = null,
-        init_data = `{
-        curTab: "（v-model）当前 tag id",
-        tagsData: "(参照：tags-wid 组件入参，不含 mode 项)",
-        /* smooth: "平滑切换，默认 false" */,
-    }`;
-
-    export default {
-        name: "tab-wid",
-        introduce: { desc, extend, dependent, api, init_data },
-        components: {
-            BView,
-            BText,
-            TagsWid,
-            SliderWid
-        },
-        model:{
-            prop: "curTab",
-            event: "on_select"
-        },
-        props: {
-            curTab: {
-                type: String,
-                required: true
-            },
-            tagsData: {
-                type: Object,
-                required: true
-            },
-            smooth: {
-                type: Boolean,
-                required: false,
-                default: false
-            }
-        },
-        data(){
-            return {
-
-                //当前所选标签
-                cur_tab: [this.curTab],
-
-                //tags_data
-                tags_data: { ...this.tagsData, mode: "radio" }
-
-            }
-        },
-        computed: {
-
-            //轮播器
-            slider(){
-                return this.$refs.slider;
-            }
-
-        },
-        watch: {
-
-            //监听当前所选标签
-            cur_tab(val){
-                this.slider.flip(this.tags_data.tagList.findIndex((item)=>{
-                    return item.id === val[0]
-                }) + 1, this.smooth);
-                this.$emit("on_select", val[0]);
-            }
-
-        },
-        methods: {
-
-            //初始化内容定位
-            $_init_page(){
-                this.slider.flip(this.tags_data.tagList.findIndex((item)=>{
-                    return item.id === this.cur_tab[0]
-                }) + 1, false);
-            },
-
-            //触控分页
-            $_page_flip(page){
-                const val = this.tagsData.tagList[page - 1].id;
-                if(this.cur_tab[0] !== val) this.cur_tab = [val];
-            }
-
-        }
-    }
-</script>