尝试在android和iOS平台下使用字体图标:1.装载字体图标 created:function () {
var domModule=weex.requireModule("dom");
domModule.addRule('fontFace',{
'fontFamily':'iconfont',
'src':"url(\'http://at.alicdn.com/t/font_h973ii9uesgaatt9.ttf\')"
})
}2.使用字体图标<text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}" ></text>通过以上这种方式,直接写死unicode是可以正常渲染出来的。然而,如果将里面的字符使用变量的方式给予赋值,是无法渲染出来的。 <text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}" >{{fontName}}</text>
fontName:""尝试各种办法,无果,可能是底层渲染时机的问题。
2 回答
摇曳的蔷薇
TA贡献1793条经验 获得超6个赞
对这个问题我仔细跟踪了下,导致的原因是:
在template中 text写死 时,weex-template-compiler在编译阶段使用了he进行decode,而在template中Mustache进行数据绑定fontName(fontName:"")时不会进行decode
既然了解了原因,可以这样解决,
在vue中引入he模块,自己进行解码
<text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}">{{getFontName}}</text>
<script>
var he = require('he');
module.exports = {
data: function () {
return {
fontName: '',
}
},
computed: {
getFontName: function() {
return he.decode(this.fontName)
}
}
}
</script>
白板的微信
TA贡献1883条经验 获得超3个赞
不用那么麻烦,不需要什么解码,只需要把
换成\ue685
就可以了
<text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}" >{{fontName}}</text> fontName:"\ue685"
- 2 回答
- 0 关注
- 1139 浏览
添加回答
举报
0/150
提交
取消