t***@163.com
t***@163.com
  • 发布:2019-02-18 17:51
  • 更新:2019-05-16 16:35
  • 阅读:1804

请问uniapp集成的是weex哪个版本高于0.11吗?为什么wx单位不起作用

分类:uni-app

请问uniapp集成的是weex哪个版本高于0.11吗?为什么wx单位不起作用

2019-02-18 17:51 负责人:无 分享
已邀请:

最佳回复

DCloud_App_Array

DCloud_App_Array

使用weex的0.20.0版本,Weex中css单位官方公布仅支持px。
参考:https://weex.apache.org/cn/wiki/css-units.html。
而实际weex的实现中也支持wx单位(与设备屏幕宽度无关的绝对长度单位)

t***@163.com

t***@163.com (作者) - 80后

官方为啥不回答下这个问题?回避?还是解决不了?
怂了?

t***@163.com

t***@163.com (作者) - 80后

你要是说,确实现在解决不了也行啊,可是为啥没个回复?

t***@163.com

t***@163.com (作者) - 80后


<template>  
    <div>  
        <div v-if="drag" class="wrap tab-bar-scroll">  
            <scroller class="scroll" scrollDirection="horizontal" showScrollbar="false">  
                <div  
                    class="tab-bar-item tab-bar-scroll-width"  
                    v-for="(tabBar, t) in tabBars"  
                    :key="t"  
                    :ref="tabBar.id + t"  
                    @click="change(t)"  
                >  
                    <text class="tab-bar-title" :class="[tabIndex === t ? 'active' : '']">{{  
                        tabBar.name  
                    }}</text>  
                </div>  
            </scroller>  
        </div>  
        <div v-else class="wrap tab-bar">  
            <div  
                class="tab-bar-item"  
                v-for="(tabBar, t) in tabBars"  
                :key="t"  
                :ref="tabBar.id + t"  
                @click="change(t)"  
            >  
                <text class="tab-bar-title" :class="[tabIndex === t ? 'active' : '']">{{  
                    tabBar.name  
                }}</text>  
            </div>  
        </div>  
    </div>  
</template>  

<script>  
const dom = weex.requireModule('dom');  

export default {  
    props: {  
        drag: {  
            type: Boolean,  
            default: true  
        },  
        tabBars: {  
            type: Array,  
            default: function(e) {  
                return [];  
            }  
        },  
        tabIndex: {  
            type: Number,  
            default: 0  
        }  
    },  
    watch:{  
        tabIndex(newVal){  
            this.change(newVal)  
        }  
    },  
    methods: {  
        async change(index, e) {  
            let ret = {  
                index: index  
            };  
            //          if (e.type === 'click') {  
            //              let target = e.target;  
            //              ret.index = target.parentNode.children.findIndex(node => node === target);  
            //          }  
            this.$emit('_tabBarClick', ret);  
            const el = this.$refs[this.tabBars[index].id + index][0]  
            let elSize = await this.getElSize(el);  
            if (elSize.left + elSize.width > 750) {  
                let idx = index - 4;  
                let newEl = this.$refs[this.tabBars[idx].id + idx][0]  
                dom.scrollToElement(newEl, {});  
                return;  
            }  
            if (elSize.left < 0) {  
                dom.scrollToElement(el, {});  
            }  

        },  
        getElSize(el) { //得到元素的size  
            return new Promise((res, rej) => {  
                const result = dom.getComponentRect(el, option => {  
                    res(option.size);  
                })  
            })  
        }  
    }  
};  
</script>  
<style>  
.wrap {  
    height: 40wx;  
    /* width:750wx; */  
    flex-direction: row;  
    border-width: 1wx;  
    border-color: #c8c7cc;  
    border-style: solid;  
    font-size: 15wx;  
}  
.tab-bar {  
    justify-content: space-between;  
    padding-left: 20wx;  
    padding-right: 20wx;  
}  
.scroll {  

    height: 40wx;  
    /* width:750wx; */  
    flex-direction: row;  
}  
.tab-bar-item {  
    height: 40wx;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  
.tab-bar-scroll-width {  
    margin-left: 10wx;  
    margin-right: 10wx;  
}  
.tab-bar-title {  

    font-size:15wx;   
    color: #555;  
}  
.active {  
    font-size:15wx;   

    color:#FFFFFF;  
    text-align: center;  
    /* 圆角*/  
    background-color: #6D5732;  
    border-radius: 30wx;  
    padding-left: 15wx;  
    padding-right: 15wx;  
    padding-top: 6wx;  
    padding-bottom: 6wx;  

}  
</style>  
这个是官方组件tabbar里的实例代码,根本不起作用!
```你要是说,确实现在解决不了也行啊,可是为啥没个回复?
t***@163.com

t***@163.com (作者) - 80后

请官方出来回应一下

该问题目前已经被锁定, 无法添加新回复