weex的坑(总)
1、<text>组件会被转为p标签，对于字体的样式直接写在<text>组件上，写在外层div无效。
2、背景图片直接用<image>标签，背景图片上的内容放在<image>标签之后，这样会自动放在背景图之上，不用设置层级。
3、图片必须设置固定宽高，图片地址用绝对路径（http或者https）
4、padding可简写， margin不要简写，因为margin简写在有的手机上会失效。
5、border不要简写
6、border-radius如果四个圆角大小相同，可简写；圆角大小不同，就拆开写。
7、设置背景色，不要简写，在手机上无效。直接写background-color。
8、文字溢出展示的css要用lines: 1;来指定最多显示的行数。然后加上以下代码：
overflow: hidden;
text-overflow: ellipsis;
lines: 1; // 指定溢出的行数
max-data-width: 492px;
9、文字的颜色值要么六位颜色值#2B313D，要么简写的三位#fff, 要么英文red。
10、如果使用了scroller, 要为它设置边框border的话，不要直接在scroller上写border, 手机上是无效的。可在外层包裹一个div, 在该div上设置border。
11、weex一般使用flex布局，默认排列方向的column，不需要写display: flex。如果要横向布局，需加上flex-direction; row;来声明。最外层元素要居中显示的话，直接对该元素使用align-self: center; 不要使用margin; 0 auto;或者position: relative; left: 50%;transform: translateX(-50%);这种形式，在手机上是无效的。
12、地址跳转请使用weex内置模块nav。
const nav = weex.requireModule('nav')
// 跳转
nav.push({
url: '',
animation: true
})
1、在使用storage客户端存储的时候， 变量不能使用局部变量的形式，也就是下面这种是获取不到的，或者获取到了，无法正常使用
function toPage() {
let info
storage.getItem('previledge', e => {
if (e.result === 'success') {
info = JSON.parse(e.data)
}
})
....
}
改成响应式的数据就可以了
function toPage() {
storage.getItem('previledge', e => {
if (e.result === 'success') {
// 这种
this.info = JSON.parse(e.data)
}
})
....
}
2、获取图片的实际宽高
onImageLoad (ele, event) {
const view = event.target
if (event.success) {
if (weex.config.env.platform === 'Web') {
view.style.width = event.size.naturalWidth / 2 + 'px'
view.style.height = event.size.naturalHeight / 2 + 'px'
} else {
animation.transition(view, {
styles: {
width: event.size.naturalWidth / 2 + 'px',
height: event.size.naturalHeight / 2 + 'px'
},
duration: 0, // 需要设置为0，否则无效
timingFunction: 'ease',
delay: 0,
needLayout: true // 变化后刷新界面
}, function () {})
}
}
},
然后在image标签加上@load="onImageLoad('img1', $event)"
3、把跳转链接进行了封装一个函数
push (url) {
nav.push({
url,
animated: 'true'
})
}
然后在点击某个元素，跳转某个链接的时候，不能直接在元素上调用push
<div @click="push(url)"></div>
这样写会报错原因：配置的域名地址未在data中声明
改成下面这样就能正常跳转
<div @click="toLink"></div>
...
methods: {
toLink() {
this.push(url)
}
}
4、部分https图片不显示，是因为手机开了代理的原因
5、使用nav模块进行链接的跳转，链接中不能含中文，不然点击没反应。要使用encodeURIComponent进行编码
6、如果要在页面显示的时候进行数据的更新，必须且只能在根元素上绑定 viewappear事件；
如果是局部更新，就在当前元素上绑定appear事件，该事件会在这个元素再次出现在你视野的时候触发。
7、在app容器中，如果想要手机的头部也要被背景图片覆盖，调高内容头部的背景图片，然后把内容往下移手机导航栏的高度（不知你看懂没有，嘻嘻）
8、关于动画
当你只能在下一个循环获取动画元素时（比如一开始是隐藏的，点击后才显示），使用this.nextTick换成setTimeout即可。
并且注意transform动画元素只支持translate/translateX/translateY这三个属性
9、小icon图用3倍图，不然android上会有棱角
1、loadmore事件不会在web端触发
2、不支持百分比单位
3、垂直水平居中： justify-content: center即可
4、使用this.$emit('call-click')， 然后在父组件中监听call方法，发现在APP中无法唤起call-click方法（健康VIP，点击客服权益按钮）
原因： 不能使用-方法，应该写成this.$emit(callClick)
5、不支持vue中的事件修饰符，比如.stop, .prevent等
6、动态绑定class, 请使用数组的形式.
多个class用逗号分隔
:class="[index == choosedIndex ? 'choosed-class' : '',
index != choosedIndex ? 'unchoosed-class' : '']"
7、组件所传递的数据一定要在beforeMount钩子中先获取到，不然手机端数据会先为空， 然后你的组件有限制条件显示的话，就不显示了。（比如健康VIP的邀请入口v-prize-new）
因为渲染流程是： beforeMount(拿数据)->渲染组件->created->mounted
8、background-image: linear-gradient(to right, red, blue)；这种渐变不能与border-radius圆角大小不一样时同时使用，同时使用会导致border-radius失效。
比如：
// border-radius会失效
border-top-left-radius: 0;
border-top-right-radius:0;
border-bottom-right-radius:12px;
border-bottom-left-radius:12px;
background-image: linear-gradient(to right, red, blue);
// border-radius正常显示
border-radius:12px;
background-image: linear-gradient(to right, red, blue);
9、对于某些样式属性，weex会给出警告的要思考怎么处理。比如align-self， max-width, min-width, white-space, word-break, outline, display, flex-start等
10、如果你的横向scroller组件无法滚动，考虑给scroller加个宽度就可以了。
1、weex中默认的css样式不要写：
display,
position: relative,
2、color属性都写全，不然爆出警告（这个可能跟项目的配置有关）color: #fff; -> color: #ffffff;
3、align-self: center；的替换方案：
1、在元素的外层加一个div标签，然后对该div设置居中flex布局： justify-content: center; align-items: center
2、如果该元素有固定的宽度： margin-left: (750 - 元素的宽度) / 2
4、自定义slider的指引器
<slider class="banner-slider" auto-play="true" interval="3000" @change="getSliderIndex">
<div v-for="(banner, index) in data.bannerList" :key="index" >
<image class="banner-slider-image" @load="onImageLoad" :resize="data.effect === 2 ? 'cover' : 'contain'" :src="banner.src"></image>
<text class="banner-slider-title">{{banner.title}}</text>
</div>
<!-- <indicator class="banner-slider-indicator" v-if="data.effect === 2 && data.bannerList.length > 1"></indicator> -->
</slider>
<!-- 自定义indicator -->
<div class="custom-indicator-box">
<div class="custom-indicator" :class="[index === currentSliderIndex ? 'custom-indicator-active': '']" v-for="(banner, index) in data.bannerList" :key="index"></div>
</div>
.banner-slider-indicator {
position: absolute;
right: 10px;
bottom: 0;
height: 60px;
item-size: 20px;
item-color: #dddddd;
item-selected-color: #ffffff;
}
.custom-indicator-box {
position: absolute;
right: 10px;
bottom: 0;
height: 60px;
flex-direction: row;
}
.custom-indicator {
width: 20px;
height: 20px;
border-radius: 10px;
border-width: 1px;
border-style: solid;
border-color: #ffffff;
background-color: transparent;
margin-right: 5px;
}
.custom-indicator-active {
background-color: #ffffff;
}
.banner-slider-title {
width: 750px;
position: absolute;
left: 0;
bottom: 0;
padding: 0 80px;
font-size: 20px;
line-height: 32px;
text-align: center;
color: #ffffff;
background-color: rgba(102, 102, 102, 0.8);
overflow: hidden;
text-overflow: ellipsis;
lines: 1;
}
onImageLoad (event) {
...
},
getSliderIndex (e) {
this.currentSliderIndex = e.index
}
1、如果你想让你scroller容器内的元素平均分配空间, 那么
- 在scroller外层包裹一个div, 给这个div一个最小宽度min-width
- 在scroller容器下的每个子元素上加上flex-grow: 1, 注意不要使用flex:1; 哦，
因为该属性是 flex: <flex-grow> | <flex-shrink> | <'flex-basis> 的简写，但是weex中Flex 成员项暂不支持 flex-shrink 和 flex-basis 属性。
2、导航吸顶
- 可以监听scroller的scroll事件获取滚动的距离，然后跟元素的初始top（这个通过dom模块的getComponentRect放来获取）做比较，再加上固定样式即可。
-
外层滚动使用list组件代替，然后将要固定的元素使用<header>来包裹即可。
