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>

   

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

原文：https://www.cnblogs.com/wx3091/p/14519471.html