weex实现带有跟手动画的tab栏

在weex开发的群中看到有人提到这个问题，就想着去实现以下，还不是很完美，只支持一屏的tab栏内容，后续会进行优化。

2019-6-20 更新：已支持滚动跟手，可以超出屏幕。

2019-6-23 更新：解决子元素包含滚动标签时无法滑动切换的问题。

2019-6-25 更新：修复底部和指示器会超出屏幕的bug。

效果图如下：

组件源码：

<template>
    <div class="container">
        <scroller scroll-direction="horizontal" show-scrollbar="false"show style="flex-direction: row;width: 750px;height:90px">
            <div class="tab_top">
                <div ref="tab_item" class="tab_item" @click="itemClick(index)"
                     :style="{width:itemWidth,backgroundColor:backgroundColor}" v-for="(item,index) in tabItems">
                    <text class="tab_item_text" :style="{fontSize:fontSize,
                    color:selectIndex===index?textSelectColor:textColor}">{{item.text}}</text>
                </div>
                <div ref="indicator" class="indicator" :style="{width:itemWidth-40,backgroundColor:indicatorColor}"></div>
            </div>
        </scroller>

        <div class="tab_content" @touchstart="bindingX" :prevent-move-event="true"
             :style="{width:tabItems.length*750}" ref="tab_content">
            <!--@touchstart="bindingX"-->
            <slot></slot>
        </div>

    </div>
</template>

<script>
    import Head from "./head.vue";
    let binding = weex.requireModule('binding');
    import { parse } from 'bindingx-parser';
    let modal=weex.requireModule('modal');
    let dom=weex.requireModule('dom')
    let animation=weex.requireModule('animation');
    export default {
        components: {Head},
        name: "tab-container",
        props:{
            tabItems:{
                default:
                  [{
                    text:"测试1",
                  }],
                type:Array
            },
            itemWidth:{
                default:200,
                type:Number
            },
            fontSize:{
                default:"28px",
                type:String
            },
            textSelectColor:{
                default:'#268cf0'
            },
            textColor:{
                default:'#333'
            },
            /*tab底部指针的偏移量*/
            offset:{
                default:250,
                type:Number
            },
            /*可以触发动画的偏移量*/
            dist:{
                default:250,
                type:Number
            },
            backgroundColor:{
                default:"#ffffff",
                type:String
            },
            indicatorColor:{
                default:"#17acf0",
                type:String
            },
            selectIndex:{
                default:0,
                type:Number
            },
            duration: {
                type: [Number, String],
                default: 150
            },
            timingFunction: {
                type: String,
                default: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
            },
        },
        data(){
            return{
                dx:0,
                dx_i:0,
                animationIng:false,
                startScrollIndex:0
            }
        },
        watch:{
            selectIndex:function () {
                this.exeAnimationX()
            }
        },
        methods:{
            /*手势使用bindingX提高性能*/
            bindingX(element){
                let self=this;
                if(self.animationIng){
                    return;
                }
                let {dist}=this;
                let dx=-750*self.selectIndex;
                let dx_i=self.itemWidth*self.selectIndex;
                let indicator=self.$refs.indicator.ref;
                let tab_content=self.$refs.tab_content.ref;

                let tab_content_x=`x+${dx}>0?0:x+${dx}`;
                let indicator_x=`x+${dx}>0?0:${dx_i}-x/${750/this.itemWidth}`;
                if(-dx/750===self.tabItems.length-1){
                    indicator_x=`x<0?${dx_i}:${dx_i}-x/${750/this.itemWidth}`;
                    tab_content_x=`x<0?${dx}:x+${dx}`;
                }
                if(element.ref==null){
                    return;
                }
                self.token=binding.bind({
                    anchor:element.ref,
                    eventType:'pan',
                    props:[
                        {
                            element:tab_content,
                            property:'transform.translateX',
                            expression:parse(tab_content_x)
                        },
                        {
                            element:indicator,
                            property:'transform.translateX',
                            expression:parse(indicator_x)
                        }
                    ]
                },(event)=>{
                    // modal.alert({message:event});
                    let {deltaX,state}=event;

                    if(state==='end'){
                        if(deltaX>dist&&this.selectIndex>0){
                            this.selectIndex--;
                        }else if(deltaX<-dist&&this.selectIndex<self.tabItems.length-1){
                            this.selectIndex++;
                        }else{
                            this.exeAnimationX()
                        }
                    }
                }).token;
            },
            /*动画尽量使用animation简化代码*/
            exeAnimationX(){
                let self=this;
                self.animationIng=true;
                let tab_content=self.$refs.tab_content;
                let indicator=self.$refs.indicator;
                const { duration, timingFunction,selectIndex} = this;
                const dist =selectIndex * 750;
                const dist_i=self.itemWidth*selectIndex;
                animation.transition(tab_content, {
                    styles: {
                        transform: `translateX(${-dist}px)`
                    },
                    duration: duration,
                    timingFunction,
                    delay: 0
                }, () => {
                    self.$emit("itemClick",selectIndex);
                    self.animationIng=false;
                    if(self.offset<dist_i){
                        dom.scrollToElement(self.$refs.tab_item[selectIndex], {offset:-self.offset,animated:true})
                    }else{
                        dom.scrollToElement(self.$refs.tab_item[selectIndex], {offset:-dist_i,animated:true})
                    }
                    // binding.unbindAll();
                });
                animation.transition(indicator, {
                    styles: {
                        transform: `translateX(${dist_i}px)`
                    },
                    duration: duration,
                    timingFunction,
                    delay: 0
                }, () => {
                });
            },
            itemClick(index){
                 let self=this;
                if(self.animationIng){
                    return;
                }
                self.selectIndex=index;
                // dom.scrollToElement(this.$refs.tab_item[index], {offset:-self.offset,animated:true})
                // self.exeAnimationX(index);
            }
        },
        created(){
             let self=this;
             self.startScrollIndex=750/self.itemWidth;
             setTimeout(()=>{
                 // dom.scrollToElement(this.$refs.tab_item[self.selectIndex], {offset:-self.offset,animated:true})
                 self.exeAnimationX();
             },100);
        }
    }
</script>

<style scoped>
    .container{
        /*position:relative;*/
        /*top:0;*/
        /*left:0;*/
        /*bottom: 0;*/
        /*background-color: yellow;*/
    }
    .tab_content{
        flex-direction: row;
        position:relative;
        top:0;
        left:0;
        bottom: 0;
    }
    .tab_top{
        flex-direction: row;
    }
    .tab_item{
        height: 90px;
        align-items: center;
        justify-content: center;
    }
    .tab_item_text{
    }
    .tab_item_text_focus{
        font-size: 26px;
        color: #268cf0;
    }
    .indicator{
        height: 5px;
        background-color: white;
        position: absolute;
        bottom: 0;
        left: 20px;
    }
</style>

使用方法：

<template>
  <div>
     <head></head>
      <tab-container @itemClick="itemClick" :tabItems="tabItems">
           <list v-for="(item,index) in tabItems" class="tabCell">
                        //滚动元素需要把事件给到每个根子元素上，并设置prevent-move- 
                        //event="true" 
                        <cell class="content" :prevent-move-event="true" @horizontalpan="wxcPanItemPan">
              <text class="tab_item_text" style="font-size: 34px;color:#ffffff">{{item}}</text>
                     </cell >
           </list>
           //普通非滚动元素用法,不用传递事件解决冲突
           // <div class="content"  v-for="(item,index) in tabItems" >
           // <text class="tab_item_text" style="font-size: 34px;color:#ffffff">{{item}} 
           //  </text>
           // </div>

      </tab-container>

  </div>
 
</template>
<style>
    .content{
        width: 750px;
        height: 1200px;
        align-items: center;
        justify-content: center;
        background-color: green;
    }
</style>

<script>
  const modal=weex.requireModule('modal');
  import Head from "../components/head.vue";
  import TabContainer from "../components/tabContainer.vue";
  export default {
      components: {
          TabContainer,
          Head},
      data () {
      return {
        text: 'Hello World.',
          tabItems:[{
              text:"测试1",
              font_size:26,
              textColor:"#ffffff"
          },{
              text:"测试2",
              font_size:26,
              textColor:"#ffffff"
          },{
              text:"测试3",
              font_size:26,
              textColor:"#ffffff"
          },
              {
                  text:"测试4",
                  font_size:26,
                  textColor:"#ffffff"
              },
              {
                  text:"测试5",
                  font_size:26,
                  textColor:"#ffffff"
              },
              {
                  text:"测试6",
                  font_size:26,
                  textColor:"#ffffff"
              },
              {
                  text:"测试7",
                  font_size:26,
                  textColor:"#ffffff"
              }],
          contents:[111,222,333],
          param:''
      }
    }
    ,
      methods:{
          itemClick(index){
              modal.toast({message:index})
          },
          //这个事件是为了解决事件冲突
          horizontalpan(e) {
                // modal.alert({message:e});
                if (e.state === 'start') {
                    if (commonUtils.env.supportsEBForAndroid()) {
                        this.$refs['tabContainer'].bindingX(e.currentTarget);
                    }
                }

            },
      }
     ,
      created:function(){

      }
  }
</script>

我的weex相关博客：weex开发系列

我的开源weex模板项目：IWeex