zoukankan      html  css  js  c++  java
  • uni-app开发注意事项及常用样式

    注意事项

    https://uniapp.dcloud.io/frame?id=template-block
    官方推荐:
    v-if写在<template/>标签中,v-for写在<block/>标签中
    它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性

    https://uniapp.dcloud.io/use?id=%e4%ba%8b%e4%bb%b6%e5%a4%84%e7%90%86%e5%99%a8
    阻止冒泡事件:.stop
    例如:@tap.stop

    methods中调用方法

    this.$options.methods.test();

    监听subNVue子页面的show和hide方法

    在onload方法中添加

    uni.getCurrentSubNVue().addEventListener("show", function() {
    console.log("subNVue子窗体已显示!")
    });
    uni.getCurrentSubNVue().addEventListener("hide", function() {
    console.log("subNVue子窗体已隐藏!")
    });

    父组件调用子组件中的方法

    https://www.cnblogs.com/wangxiaoling/p/10250903.html

    首先,引入子组件文件,然后用ref给子组件一个id标识,

    然后通过this.$refs.mainindex.childMethod();调用子组件方法

    nvue窗体css样式注意事项

    https://ask.dcloud.net.cn/article/36074
    1、只有text标签可以设置字体大小,字体颜色
    2、布局不能使用百分比
    3、只能使用class选择器
    4、border不支持简写
    5、background不支持简写
    6、.nvue 页面的布局排列方向默认为竖排(column),如需改变布局方向,可以在 manifest.json -> app-plus -> nvue -> flex-direction 节点下修改,仅在 uni-app 模式下生效。
    7、nvue的uni-app编译模式下,App.vue 中的样式,会编译到每个 nvue文件

    nvue与vue页面开发的常见区别

    https://uniapp.dcloud.io/use-weex?id=nvue%e5%bc%80%e5%8f%91%e4%b8%8evue%e5%bc%80%e5%8f%91%e7%9a%84%e5%b8%b8%e8%a7%81%e5%8c%ba%e5%88%ab

    自定义导航栏注意事项

    https://uniapp.dcloud.io/collocation/pages?id=customnav

    flex布局

    https://www.jianshu.com/p/4d596708f61b
    https://www.cnblogs.com/dreamperson/p/9367008.html

    display: flex; //将对象作为弹性伸缩盒显示
    display: inline-flex; //将对象作为内联块级弹性伸缩盒显示 父元素默认根据子元素宽高自适应
    
    //主轴方向
    flex-direction: row; //项目排列方向为水平方向,从左端开始
    flex-direction: column; //主轴为垂直方向,起点在右端
    
    //如何换行
    flex-wrap: nowrap; //项目不换行排列
    flex-wrap: wrap; //换行排列,第一行在上方
    flex-wrap: reverse; //换行排列,第一行在下方
    
    //主轴对齐方式
    justify-content: flex-start //左对齐
    justify-content: flex-end //右对齐
    justify-content: center //居中
    justify-content: space-between //两端对齐,项目之间间隔相等
    justify-content: space-around //每个项目两侧间隔相等
    
    //项目在交叉轴上对齐方式
    align-items: center; //垂直居中
    align-items: flex-start; //交叉轴起点对齐
    align-items: flex-end; //交叉轴终点对齐
    
    //多跟轴线的对齐方式
    align-content: center; //垂直居中
    align-content: flex-start; //交叉轴起点对齐
    align-content: flex-end; //交叉轴终点对齐

    常用样式

    position:sticky //粘性定位(基于用户的滚动位置来定位,使用时需指定特定阈值,如top:0)
    position:static //默认定位(没有定位)
    position:fixed //固定定位(固定在窗口位置,窗口滚动也不会移动)
    position:relative top:10px //相对定位(相对其正常位置定位)
    position:absolute //绝对定位(相对于最近的已定位父元素,如果没有已定位父元素,则相对于<html>)
    
    //https://www.cnblogs.com/liangdecha/p/9566407.html
    :nth-child()选择器,选择器选区父元素的第N个子元素,与类型无关
    :nth-child(odd)奇数
    :nth-child(even)偶数
    
    //https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before
    ::before创建一个伪元素,其将成为匹配选中的元素的第一个子元素
    
    border-radius:30upx; //圆角半径
    
    text-indent:20px //首行缩进
    
    letter-spacing:1px //字间距
    
    vertical-align: middle; //图片垂直居中
    
    z-index //重叠元素的堆叠顺序
    
    transform: rotate(45deg); //旋转元素45度(菱形)
    
    //https://www.cnblogs.com/skura23/p/6505352.html
    :active,元素被点击时变色,但颜色在点击后消失
    :focus, 元素被点击后变色,且颜色在点击后不消失
    
    //https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient
    background: linear-gradient(#74AADA, #94db98); //渐变色

    End!

  • 相关阅读:
    设计模式之桥接模式
    设计模式之适配器模式
    设计模式之建造者模式
    设计模式之原型设计
    Exception in thread "main" java.lang.UnsupportedOperationException
    设计模式7大原则
    设计模式之单例模式
    初识python
    消息传递:发布订阅模式详解
    哨兵机制(Redis Sentinel)
  • 原文地址:https://www.cnblogs.com/gygg/p/12204561.html
Copyright © 2011-2022 走看看