艾璟的黑马小程序笔记

选中一段文字  或 什么东西   ctrl+d  快速选择下一个   可以快速替换

高度坍塌   父元素无法撑起子元素
在父元素添加:after伪类{
选中父元素的最后面
    content:"";
添加空白
    display:block;
为块元素
    clear:both;
清楚浮动
}

一个页面四部分组成   不产生样式冲突
shift+alt+F 格式化代码
view等于div

<scroll-view class="box" scroll-x>    包裹view盒子

<swiper class="container1"
 indicator-dots    激活小圆点
indicator-color="pink"  小圆点未激活颜色
indicator-active-color="lightgoldenrodyellow"小圆点激活颜色
autoplay   自动播放
interval='5000'  自动播放的间隔时间
circular   轮播图衔接滚动
>
  <swiper-item>
    <view class="item">
      A
    </view>
  </swiper-item>
  <swiper-item>
    <view class="item">
      B
    </view>
  </swiper-item>
  <swiper-item>
    <view class="item">
      C
    </view>
  </swiper-item>
</swiper>

text组件   支持文本长按选中效果
<text>长按选中文本text</text>
rich-text  富文本  渲染wxhtml标签      外面是双引号   里面是单引号   不能出一点错误
<rich-text nodes="<h1 style='color: pink;'>我爱你</h1>"></rich-text>

3.
正常
<button>普通按钮</button>
<button type="primary">按钮</button>
<button type="warn">按钮</button>

尺寸
<button size="mini">按钮</button>
<button type="primary" size="mini">按钮</button>
<button type="warn" size="mini">按钮</button>

镂空
<button size="mini" plain>按钮</button>
<button type="primary" size="mini" plain>按钮</button>
<button type="warn" size="mini" plain>按钮</button>

app.json   下面的 style  :"v2"还是v3   设置其设定的样式

图片是image   mode设置其图片大小的模式  aspectFill  方面的纵横比填充  aspectFit 纵横缩小
WightFix  宽度填满  高度拉长  heightFix 相反
<image src="../images/11.webp" mode="" mode="aspectFill"/>

4.mustache  语法
<view>
  { {uname}} { {password}}
</view>

<!-- <image src="{ {info}}" mode=""/> -->

{ {ran}}

<view>
  { {ran>=5 ? "我是帅哥" : "贱货差我"}}
</view>

事件
target：触发该事件的源头组件
currentTarget是当前事件的组件
e.target   是内部的组件
e.currentTarget是当前的view组件

事件处理    eventHandler
<button type="primary" bindtap="btnTapHandler">点我</button> { {num}}

  btnTapHandler(e){ 
    console.log(e);
    // 当前的设置data属性方法   : 需要设置的属性:    访问属性是 this.data.属性    
    this.setData({
      num: this.data.num+1
    }) 
  },    一定要加逗号

在事件的传参里，传参的值不能直接写到括号里面
data-info="{ {}}"  info是参数的名字  2是参数值
<button bindtap="btnHandler" data-info="{ {2}}">

e.datail.value是变化过后的新值   绑定其值

5.
<button type="primary" bindtap="btnTapHandler">点我</button> { {num}}
<button type="primary" bindtap="chuanCan" data-info="{ {2}}">事件传参</button>
<input value="{ {msg}}" bindinput="inputHandler"> </input>

this.setData({
      // 因为e.detail.value是属性变化后的新值  将其值 不断的赋予其值就可以实现数据绑定
      msg:e.detail.value
    })

6.<!-- 条件渲染   判断其type的值  来决定其显示和隐藏 -->

判断data中的type的值  来判断其if的显示和隐藏
<view wx:if="{ {type===1}}">
  男
</view>
<view wx:elif="{ {type===2}}">
  女
</view>
<view wx:else>
  傻逼
</view>

7.
block标签只是包裹效果   不会起到任何作用
<block wx:if="{ {false}}">

8.
hidden="condition" 属性也可以显示和隐藏
false代表激活显示 不执行hidden效果   ture代表隐藏

二者等同于   vue的v-if和v-show
wx:if是动态创建和移除元素的方式   
hidden是切换样式:display:block/none

频繁切换是hidden    条件复杂是wx:if

9.
<!-- for列表渲染 -->
wx:for-item指定渲染的名称   wx:for="{ {名称}}"    wx:key="id" 提高渲染的性能
这里是指定其for-item和key的自定义名称 
key的值需要与其遍历的id值   其index的会
<view wx:for="{ {arr1}}" wx:for-item="xiang" wx:key="id">
  { {index}} { {xiang.id}}{ {xiang.name}}{ {xiang.age}}
</view>

  arr1:[
      {id:1,name:"艾璟",age:18},
      {id:2,name:"艾璟",age:18},
      {id:3,name:"艾璟",age:18},
    ],

10.导入   @import  后面跟需要导入的外联表的相对路径;
exmple:@import "/common/common.wxss";

/直接写路径     代表直接进入其指定的文件夹下

11.window的配置项
navigationBarTitleText   导航的名称   dark  whilt
navigationBarTextStyle   导航的颜色   #16进制的
navigationBarBackgroundColor  导航的背景颜色
backgroundTextStyle      导航的文本颜色 只有黑白

enablePullDownRefresh: true,  全局开启下拉刷新
backgroundColor: "#efefef"    下拉刷新空间的颜色
onReachBottomDistance    下拉触底加载   最好别射

12.tabBar   最少2个  最多5个   在app.json中写
backgroundColor   背景颜色
selectedIconPath   已选中图标的路径显示
selectedColor    选中的颜色
borderStyle   边框样式
iconPath    未选中的图标
color  颜色