uni-app(三)组件、插件使用，引入字体

• 组件、插件的使用，其实和平时的 vue 项目都是如出一辙的，只是全局引用时，需要在 pages.json 文件里注册，下面有介绍

• 先介绍组件，在 main.js 同级创建 components 文件夹，创建 toTop.vue，名字自己随意命名

<template>
  <view v-show="show" class="totop" :style="{bottom: bottom + 'rpx'}">
    <view class="totop_content" @click="toTop">
      <view class="img_wrapper">
        <image :src="topIcon" />
      </view>
      <text>顶部</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    scrollTop: {
      type: Number,
      default: 0
    },
    bottom: {
      type: Number,
      default: 40
    }
  },
  data() {
    return {
      topIcon: '/static/icon/toTop.svg'
    }
  },
  computed: {
    show() {
      let show = this.scrollTop >= 400 ? true : false
      return show
    }
  },
  methods: {
    // 回到顶部
    toTop() {
      let obj = {
        scrollTop: 0
      }
      uni.pageScrollTo(obj)
    }
  }
}
</script>

<style lang="scss" scoped>
  .totop {
    position: fixed;
    right: 40rpx;
    z-index: 999;
    .totop_content {
      width: 70rpx;
      height: 70rpx;
      color: $uni-text-color-inverse;
      background: $uni-bg-color-mask;
      display: flex;
      flex-direction: column;
      border-radius: 50%;
      font-size: 18rpx;
      .img_wrapper {
        text-align: center;
        image {
          width: 30rpx;
          height: 15rpx;
          margin-top: 12rpx;
        }
      }
      text {
        text-align: center;
      }
    }
  }
</style>

• 单页面引用

<template>
    <view>
        ...
        <ToTop scrollTop="" />
    </view>
</template>

<script>
import ToTop from '@/components/toTop'

export default {
  data(){
    return {
      scrollTop: 0
    }
  },
  components: {
    ToTop
  },
　　 // 页面滚动监听
    onPageScroll(e) {
      this.scrollTop = e.scrollTop
    }
}

</script>

• 全局引用，在 pages.json 文件里配置，组件和插件都是一样操作

"globalStyle": {
    "navigationStyle": "custom",
    "usingComponents": {
      "toTop":"/components/toTop"
      // 引入插件也同理，路径正确就可以
    }
  }

• 自定义字体，在 App.vue 文件中引入，达到可以全局使用的效果

<style lang="scss">
    // 名字是可以自定义的，比如“TG-TYPE”
    // 路径要填写存放字体的路径
    @font-face {
        font-family: 'TG-TYPE';
        src: url('/static/font/TG-TYPE.otf');
    }
    @font-face {
        font-family: 'TG-TYPE-Bold';
        src: url('/static/font/TG-TYPE-Bold.otf');
    }
    // 页面里 font-family: 'TG-TYPE-Bold'，就成功使用了
</style>