小程序学习基础（2020/11/11）基本组件

1、view,块级元素

视图容器
属性:hover-class    hover-start-time    hover-stay-time

// 盒子的嵌套,使用hover-stop-propagation放在子元素里面组织冒泡事件
<view hover-class="out" >
    <view hover-class='inner' hover-stop-propagation></view
</view>

 

<view class="out" >
   <view>cdcd</view><view>vfvfvf</view>
</view>
css
.out view{ // 将块级元素转换为行级元素
    display:inline-block;
}

2、text 普通的行级元素，想要可以选中文本，只能使用text标签

<text selectable>文本可以被选中</text>
<text space='ensp'>可以支持空格常用ensp,vbhfbv   ncfnvf</text>
<text decode>解析空格&nbsp;、换行，左&lt;</text>

3、媒体组件，image，微信系统有默认宽高320px*240px

图片尽量不要使用本地的，需要使用线上的

../上一层目录

./当前目录

/ 一个反斜杠为根目录  n

mode属性

scaleToFill  缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素

aspectFit 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来，也就是说可以将完整的图片显示出来
widthFit 用的最多的，缩放模式，宽度不变，高度自动变化，保持图片原图宽高比不变

4、超链接navigator块元素

跳转了页面，有返回按钮，小程序之间也是可以跳转的
<navigator class="link" url="/pages/logs/logs">我是超链接啊</navigator>

open-type,跳转方式，重要属性
<navigator class="link" url="/pages/logs/logs">我是超链接啊</navigator>

open-type

navigate 对应navigateTo 或 navigateToMinProgram，保留原页面。不允许跳转到tabbar页面

 

redirect(新窗口打开)  关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到tabbar页面。没有返回

<navigator class="link" url="pages/logs/logs" open-type="redirect"></navigator>

switchTab （比较重要的）跳转到tabBar页面，并关闭其他所有非tabBar页面，路径后不能携带参数

reLaunch（万能方法）  （比较重要的）关闭所有页面，打开到应用内的某个页面，路径后可以携带参数

<navigator url="/pages/logs/logs?id=123" open-type="reLaunch"></navigator>

navigateBack 

exit 退出小程序，target='miniProgram'时生效

5、scroll-view

<text>pages/scroll/scroll.wxml</text>
<scroll-view scroll-x scroll-left="50">
  <view class="out">
    <view class="box">111</view>
    <view class="box">222</view>
    <view class="box">333</view>
    <view class="box">444</view>
    <view class="box">555</view>
    <view class="box">666</view>
  </view>
</scroll-view>
<scroll-view scroll-y >
  <view class="out2">
    <view class="box2">111</view>
    <view class="box2">222</view>
    <view class="box2">333</view>
    <view class="box2">444</view>
    <view class="box2">555</view>
    <view class="box2">666</view>
  </view>
</scroll-view>

/* pages/scroll/scroll.wxss */
.out{
  display: flex;
  flex-wrap: nowrap; /*不换行*/
  width: 520px;
}
.box{
  width: 100px;
  height: 100px;
  background: pink;
  margin-right: 5px;
  flex: 0 0 100px;/*子元素加flex  放大比例/缩小比例/保持自己本身大小*/
}
.out2{
  margin-top: 20px;
  width: 100%;
  height: 100px;
}
.box2{
  width: 100%;
  height: 50px;
  background: pink;
  margin-bottom: 5px;
  flex: 0 0 100%;/*子元素加flex  放大比例/缩小比例/保持自己本身大小*/
}

6、swiper

<!--pages/swiper/swiper.wxml-->
<text>轮播例子</text>
<swiper class="banner" indicator-dots indicator-color="#FFF" indicator-active-color="red" autoplay circular previous-margin="30" next-margin="30">
  <swiper-item class='item'>
    <image src="/images/swiper1.jpg" mode="widthFit"></image>
  </swiper-item>
  <swiper-item class='item'>
    <image src="/images/swiper2.jpg" mode="widthFit"></image>
  </swiper-item >
  <swiper-item class='item'>
    <image src="/images/swiper3.jpg" mode="widthFit"></image>
  </swiper-item>
</swiper>

/* pages/swiper/swiper.wxss */
.banner{
  height: 200px;
  box-sizing: border-box;
}
.banner image{
  width: calc( 100% - 40px );
  height: 298rpx;
}
.item{
  padding: 0 20px;
}

7、几个简单的表单组件

<!--pages/form/form.wxml-->
<text>常用组件</text>
<text>button</text>
<view>
  <button type="primary"  class="button">这是按钮</button>
  <button type="primary"  class="button" plain>这是按钮plain</button>
  <button type="warn" size="mini" class="button">warn</button>
  <button type="warn" size="mini" disabled="{{true}}" class="button">这是按钮disabled</button>
  <button size="mini" class="button">这是按钮</button>
  <button type="primary" size="mini" class="button" loading="true">加载中，请稍后</button>
  <button open-type="contact">open-type微信开放能力</button>
  <switch></switch>
  <switch checked="true"></switch>
  <textarea ></textarea>
  <form bindsubmit="onSubmit"> 
    <input class="input" placeholder="请输入用户名"></input>
    <button form-type="submit">提交</button>
  </form>
</view>

8、icon

<view style="font-size:50px;text-align:center;"><icon type="success" size="50"></icon>提交成功</view>
<view><progress active activeColor="red" backgroundColor="green" percent="89" show-info border-radius="10" bindactiveend="end"></progress></view>