一. 如有错误,欢迎指正。 二. 本文记录sass中mixin方法的使用,类似js函数,可以传参,减少css代码量 新建scss文件 /* flex布局 */@mixin flex-direction-align($direction:row,$justify:center,$align:center){display:flex;flex-direction:$direction;justify-content:$justify;align-items:$align;} 在uni.scss中...
#同时支持小程序的rpx和h5的vw,vh长度单位#内置有sass的配置了,只需要安装对应依赖即可npm install sass-loader node-sass#使用sass,在style标签中加入如下属性即可 rpx/vw/vh <viewclass="content"><viewclass="rpx">rpx</view><viewclass="vw">vw</view></view>/* 用rpx来设置宽高 */.rpx{/* 在小...
则组件里边的内容只会在半屏内上下滚动,不会触发page的滚动条只会触发scroll-view的滚动条. 如果高度不好给确定值, 可以使用scss(lange=‘scss’)中的calc计算, 例子中有体现.(注意使用calc计算时,-左右一定要有空格)
uniapp的下拉刷新有两个方法, 一种是整体的下拉刷新, 使用页面生命周期函数onPullDownRefresh; 另外一种是局部的下拉刷新也叫自定义下拉刷新, 使用scrpll-view组件中的自定义下拉刷新事件。 一.整个页面的刷新(onPullDownRefresh) 在js 中定义 onPullDownRefresh 处理函数(和onLoad等生命周期函数同级),监听该页面用...
@import"./index.scss"; 全局样式 App.vue中的样式即为全局样式,对于每一个页面通用,nvue页面不支持全局样式。 内联样式 在组件的属性中使用 class 或者 style 添加样式。 <!-- style --><view:style="{'width': '100rpx'}"></view><!-- class --><viewclass="block"></view> ...
编写函数 代码当中的tabBarList函数要和 pages.json -> tabbar 配置一样哦 输入图片说明 代码语言:scss 复制 import{defineProps,ref}from'vue'// 子组件传递参数const props =defineProps({selected:{type:Number,default:0}})// 为选中颜色let color =ref('#000')// 选中的颜色let selectedColor =ref...
App.vue 是我们的跟组件,所有页面都是在 App.vue 下进行切换的,是页面入口文件,可以调用应用的生命周期函数。 main.js 是我们的项目入口文件,主要作用是初始化 vue 实例并使用需要的插件。 uni.scss 文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss 文件里预置了一批 scss 变量预置。
page { height: 100%; overflow: hidden; background-color: #f7f7f8; } .viewport { height: 100%; background-repeat: no-repeat; background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/center_bg.png); background-size: 100%...
然后运行一下,可以看到控制台中打印出来了我们的生命周期函数,如下图所示: 这个就是在 UniApp 中 CompositionAPI 的写法。 页面生命周期 页面生命周期的写法和应用生命周期的写法是一样的,只不过是在页面中使用,我们快速搭建一下环境吧,配置一下 tabBar: ...
八、使用sass 8.1、安装 pnpm add sass 8.2、src/styles/global.scss定义全局变量 $bg-color: #f5f5f5; 8.3、 vite.config.ts引入 css: {// css预处理器preprocessorOptions: {scss: {// 因为uni.scss可以全局使用,这里根据自己的需求调整additionalData: '@import "./src/styles/global.scss";'}}}, ...