526互联

手把手教你vue3-ts-uniapp-vite创建多端小程序-3 统一ui，uni-ui库

发布时间 2023-09-03 17:13:51作者: 火龙果呀

uni-ui 官网地址https://uniapp.dcloud.net.cn/component/uniui/quickstart.html

1.安装sass、sass-loader

npm install sass -D
npm install sass-loader -D

2.安装uni-ui

npm install @dcloudio/uni-ui

3.配置easycom。在pages.json中配置

 "easycom": {
        "autoscan": true,
        "custom": {
            // uni-ui 规则如下配置
            "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
        }
    },

4.在页面中直接使用，不需要import 进来

<!-- 本示例未包含完整css，获取外链css请参考上文，在hello uni-app项目中查看 -->
<template>
  <view>
    <uni-badge text="1"></uni-badge>
    <view class="uni-padding-wrap uni-common-mt">
      <view class="uni-title uni-common-mt">
        Vertical Scroll
        <text>\n纵向滚动</text>
      </view>
      <view>
        <scroll-view
          :scroll-top="scrollTop"
          scroll-y="true"
          class="scroll-Y"
          @scrolltoupper="upper"
          @scrolltolower="lower"
          @scroll="scroll"
        >
          <view id="demo1" class="scroll-view-item uni-bg-red">A</view>
          <view id="demo2" class="scroll-view-item uni-bg-green">B</view>
          <view id="demo3" class="scroll-view-item uni-bg-blue">C</view>
        </scroll-view>
      </view>
      <view @tap="goTop" class="uni-link uni-center uni-common-mt">
        点击这里返回顶部
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, nextTick } from "vue";
const scrollTop = ref(0);
const old = ref({ scrollTop: 0 });
const upper = (e) => {
  console.log(e);
};
const lower = (e) => {
  console.log(e);
};
const scroll = (e) => {
  console.log(e);
  old.value.scrollTop = e.detail.scrollTop;
};

const goTop = (e) => {
  // 解决view层不同步的问题
  scrollTop.value = old.value.scrollTops;
  nextTick(() => {
    scrollTop.value = 0;
  });
  uni.showToast({
    icon: "none",
    title: "纵向滚动 scrollTop 值已被修改为 0"
  });
};
</script>

<style>
.scroll-Y {
  height: 300rpx;
}
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}
.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}
.scroll-view-item_H {
  display: inline-block;
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}
</style>