weex用阿里矢量图

首先这段代码来自 zwwill在github上的 weex网易严选项目

他是在utils下封装了一个方法

let utilFunc = {

    initIconFont () {

        let domModule = weex.requireModule('dom');

        domModule.addRule('fontFace', {

            'fontFamily': "iconfont",

            'src': "url('http://at.alicdn.com/t/font_630973_b31no0qq0nt57b9.ttf')"

        });

    }

}

通过 dom模块的 addRule方法

能够在html的中添加代码

字体图标有很多文件，ttf,eof,svg,woff

但是只加载这个 ttf 就能出现效果了

执行 initIconFont 之后就在html中添加了一下代码

@font-face {

  font-family: 'iconfont';  /* project id 630973 */

  url('//at.alicdn.com/t/font_630973_b31no0qq0nt57b9.ttf') format('truetype')

}

然后字体图标就生效了

注意：字体图标的链接记得改成自己的。

动态加载

<template>

    <div class="tabItem">

        <div class="item" @click="tabChange(tab.index)" v-for="tab in tabs"><text class="iconfont icon" :class="[currentIndex === tab.index ? 'active' : '']" :style="{fontFamily:'iconfont',fontSize:'60px'}">{{getFontName(tab.code)}}</text>

            <text :class="[currentIndex === tab.index ? 'active' : '']">{{tab.tabName}}</text></div>

    </div>

</template>

<script>

    var he=require('he');

    import utils from '@/assets/utils.js';

    export default {

        components: {},

        data: () => ({

            currentIndex:0,

            tabs:[{index:0,code:"",tabName:'首页'},

                {index:1,code:'',tabName:'发现'},

                {index:2,code:'',tabName:'购物车'},

                {index:3,code:'',tabName:'我的'}]

        }),

        created () {

        },

        computed: {

        },

        methods: {

            tabChange:function (index) {

                this.currentIndex=index

            },

            getFontName: function(name){

                return he.decode(name)

            }

        }

    };

</script>

巴特西

weex用阿里矢量图

最新文章

热门文章