Go to comments

微信小程序 组件

组件


https://developers.weixin.qq.com/miniprogram/dev/component/


一、基础组件

view

组件->视图容器

相当于 div

小程序官方推荐使用 flex 布局

清空根目录 app.wxss 样式，在 index.wxss 设置样式

<!--index.wxml-->
<view>view示例</view>
<view class="container">
  <view style="background-color:lightblue" >A</view>
  <view style="background-color:lightgreen" hover-class="hoverclass" hover-stay-time="3000">B</view>
  <view style="background-color:lightsalmon" >C</view>
</view>


/** 清空 app.wxss **/
.container {
  /* height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box; */
} 


/**index.wxss**/
.container {
  background-color: #eee;
  display: flex;
  justify-content: space-evenly;
}
.container view{
  width: 100rpx;
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  color: #fff;
}
.hoverclass{
  box-shadow: 0 0 15px yellow;
}


Ps：

Some selectors are not allowed in component wxss,ID selectors, and attribute selectors. 

不能使用id选择器、属性选择器和标签名选择器，请改用class选择器。


小程序设置flex的文档

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=00080e799303986b0086e605f5680a


设置 view 组件的 hover-class 属性

hover-class 设置按下去时候的样式类，当 hover-class="none" 没有效果，默认是none

hover-start-time 否按住后多久出现点击态，默认50毫秒

hover-stay-time 手指松开后点击态保留时间，默认400毫秒


scroll-view

组件->视图容器

滚动的视图区域，通过 scroll-x 以及 scroll-y 设置滚动

<!--index.wxml-->
<view>横向滚动示例</view>
<scroll-view class="container1" scroll-x>
  <view class="item" style="background-color:lightblue">1</view>
  <view class="item" style="background-color:lightgreen">2</view>
  <view class="item" style="background-color:lightsalmon">3</view>
  <view class="item" style="background-color:pink">4</view>
</scroll-view>

<view>纵向滚动示例</view>
<scroll-view class="container2" scroll-y>
  <view class="item" style="background-color:lightblue">1</view>
  <view class="item" style="background-color:lightgreen">2</view>
  <view class="item" style="background-color:lightsalmon">3</view>
  <view class="item" style="background-color:pink">4</view>
</scroll-view>


/**index.wxss**/
.container1 {
  background-color: #eee;
  width: 100%;
  height: 300rpx;
  white-space: nowrap; /*不运行换行*/
}
.container1 .item{
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  color: #fff;
  font-size: 100rpx;
  display: inline-block;
}

/**index.wxss**/
.container2 {
  background-color: #eee;
  width: 100%;
  height: 300rpx;
  /* white-space: nowrap; 不运行换行*/
}
.container2 .item{
  width: 100%;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  color: #fff;
  font-size: 100rpx;
  display: inline-block;
}


text

组件->基础内容

相当于span，可以横向嵌套，设置一段文字单独的样式

<!--index.wxml-->
<text>
  可以单独设置<text style="background:red;color:#fff;">span</text>元素的颜色
</text>


image

组件->媒体组件

用来设置图片，因为小程序要求程序大小不能超过2兆，项目中代码不会太大，比较大是静态资源，一般静态资源采用远程加载的方式


mode属性

不设置 mode 默认是 scaleToFill 模式，表示不保持图片比例

aspectFit 保持图片比例，按照长边缩放图片

aspectFill 保持图片比例，按照短边缩放图片，图片会被裁剪

widthFix 宽度不变，高度自动变化

<!--index.wxml-->
<image src="http://ruyic.com/blog/uploads/image/202311/169936706514263.jpg" mode="widthFix" class="img"/>


/**index.wxss**/
.img {
  width: 300rpx;
  height: 300rpx;
  background-color: #eee;
}


button

组件->表单组件

按钮属于表单组件，但是平时开发中，按钮用的还是很多的

<!--index.wxml-->
<!-- 预设颜色 -->
<button>基本按钮，字体是黑色的</button>
<button type="warn">警告按钮，字体是红色的</button>
<button type="primary">微信风格，背景绿色，字体是白色</button>

<!-- palain -->
<button type="primary" plain>值为true，按钮是镂空的</button>

<!-- 下面两个比较有用 -->
<button disabled>禁用</button>
<button loading>带loading图标</button>

<!-- 可以自定义宽度 -->
<button style="width:80%;" type="primary">自定义宽度</button>

还有 hover-class 设置按下去的样式


navigator

组件->导航

之前用的API跳转，实际还可以使用导航组件跳转

1. 包裹文字或按钮

2. 默认是点击时占一行，可以设置样式改变占用的大小

<!--index.wxml-->
<navigator url="/pages/logs/logs" class="nav">
  跳转到logs
</navigator>

/**index.wxss**/
.nav {
  width: 200rpx;
  background-color: #eee;
}


icon

组件->基础内容

微信小程序官方组件库提供的icon，但并不多，所以我们一般用到第三方库或iconfont

type 类型 success/success_no_circle/info/warn/waiting/cancel/download/search/clear

size 大小，默认单位是px，2.4.0支持rpx/px，2.21.3支持rem等

color 颜色，同css的color单词颜色

<!--index.wxml-->
<icon type="success" />
<icon type="success" size="50"/>
<icon type="success" size="40" color="lightgreen"/>


progress

组件->基础内容

进度条

<!--index.wxml-->
<!-- show-info显示20% -->
<progress percent="20" show-info/>
<!-- stroke-width="2"设置粗细 -->
<progress percent="40" stroke-width="2"/>
<!-- 设置颜色 -->
<progress percent="60" color="pink"/>
<!-- active加载的时候有动画 -->
<progress percent="80" active/>


/**index.wxss**/
progress {
  margin-bottom: 20rpx;
}


rich-text

组件->基础内容

富文本，在富文本输入框中支持html结构的字符串渲染为wxml


直接写html是不支持的，富文本把htmlStr字符串当做wxml渲染出来，样式也是生效的

<!--index.wxml-->
<rich-text nodes="{{htmlStr}}"/>

// index.js
Page({
  data: {
    htmlStr: `
      <div class="div_class">
        <h1>title</h1>
        <p class="p">
          Life is&nbsp;<i>like</i>&nbsp;a box of
          <b>&nbsp;chocolates</b>
        </p>
      </div>`,
    },
})

/**index.wxss**/
.div_class {
  background-color: cornsilk;
}
.p{
  color: coral;
}


二、表单组件

form


事件

bindsubmit 提交表单时候触发 submit 事件 event.detail={ value: {'name': 'value'}, formId: ''}

bindreset 重置表单时触发 reset 事件


input

输入框没有默认的样式，要自己写，所以往往外层包一个view组件


属性

placeholder 预设 placeholder="请输入..."

    placeholder-class 指定样式

type 的类型

    text 弹起文本输入键盘

    number 弹起数字输入键盘

    password 密码

disabled 禁用

confirm-type 设置键盘右下角是什么键

    send 发送

    next 下一个

    go 前往


事件

bindinput 键盘输入时触发（双向绑定的时候，避免提示，帮一个空的该事件）

bindfocus 输入框聚焦

bindblur  失焦点（翻译小程序用过）


<!--index.wxml-->
<form active="">
  <view class="inpntContainer">
    <input type="text" name="" id="" placeholder="请输入..." placeholder-class="placeholder"/>
  </view>
  <view class="inpntContainer">
    <input type="number" name="" id=""/>
  </view>
  <view class="inpntContainer">
    <input type="password" name="" id=""/>
  </view>
  <view class="inpntContainer">
    <input type="password" name="" id="" disabled placeholder="禁用"/>
  </view>
</form>


/**index.wxss**/
.inpntContainer {
  padding: 0 20rpx;
  margin: 30rpx 0;
  border-top: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
}
input{
  margin: 30rpx 0;
}
.placeholder{
  color: red;
}


label

用于文字和表单控件绑定在一起


checkbox

checkbox-group

复选框


属性

disabled 禁用

checked 默认选中


外层是 checkbox-group，里面是 checkbox

<!--index.wxml-->
<form active="">
  <checkbox-group name="checkbox" bindchange="">
    <checkbox value="check1">check1</checkbox>
    <checkbox value="check2" checked>check2</checkbox>
    <checkbox value="check3" disabled>check3</checkbox>
  </checkbox-group>
</form>


radio

radio-group

单选框


属性

disabled 禁用

checked 默认选中

color

<!--index.wxml-->
<form active="">
  <radio-group name="radio">
    <radio value="male" checked>女</radio>
    <radio value="female">男</radio>
  </radio-group>
</form>


slider

滑块


bindchange 事件获取一次滑动的值 e.detail.value


属性

min

max 最大值，默认是100，我们可以设置200

step 步长，默认是1，可以设置 step="10"

disabled

backgroundColor 背景颜色

selectedColor 已选的颜色

<!--index.wxml-->
<form active="">
  <slider bindchange="sliderChange" max="200"></slider>
</form>


// index.js
Page({
  data: {
  },
  sliderChange(e){
    console.log(e.detail.value);
  }
})


switch

开关


属性

checked 是否选中

disabled 禁用

bindchange 事件

<!--index.wxml-->
<form active="">
  <switch bindchange="switchChange"></switch>
  <switch class="switch"></switch>
</form>


// index.js
Page({
  data: {
  },
  switchChange(e){
    console.log(e.detail.value);
  }
})


/**index.wxss**/
.switch .wx-switch-input{
  width: 82rpx !important;
  height: 40rpx !important;
}
/* 设置小球 */
.switch .wx-switch-input::after{
  width: 34rpx !important;
  height: 34rpx !important;
}
/* 设置关闭状态，右边的阴影 */
.switch .wx-switch-input::before{
  width: 82rpx !important;
  height: 34rpx !important;
}


textarea

文本域

<!--index.wxml-->
<form active="">
  <textarea placeholder="请输入..."></textarea>
</form>


/**index.wxss**/
textarea{
  width: 100%;
  border: 1rpx solid #ccc;
  padding: 30rpx;
}


picker-view

picker-view 里面只能嵌套 picker-view-column

<!--index.wxml-->
<form active="">
  <picker-view indicator-style="height:40px;" style="height:180px;border:1px solid #ccc;" value="{{value}}" bindchange="pickerChange">
    <!-- 年 -->
    <picker-view-column>
      <view wx:for="{{years}}" wx:key="this" style="line-height:40px;">{{item}}年</view>
    </picker-view-column>
    <!-- 月 -->
    <picker-view-column>
      <view wx:for="{{months}}" wx:key="this" style="line-height:40px;">{{item}}月</view>
    </picker-view-column>
    <!-- 日 -->
    <picker-view-column>
      <view wx:for="{{days}}" wx:key="this" style="line-height:40px;">{{item}}日</view>
    </picker-view-column>
  </picker-view>
</form>



// index.js
const years = [];
const months = [];
const days = [];

const date = new Date();

for(let i = 1990; i <= date.getFullYear(); i++){
  years.push(i);
}

for(let i = 1; i <= 12; i++){
  months.push(i);
}

for(let i = 1; i <= 31; i++){
  days.push(i);
}

// console.log(years, months, days);

Page({
  data: {
    years,
    months,
    days,
    value: [33, 0, 15] // 默认值从0开始算
  },
  pickerChange(e){
    console.log(e.detail.value);
  }
})


keyboard-accessory

设置 input/textarea 聚焦时候键盘上 cover-view/cover-image 工具栏视图





Leave a comment 0 Comments.

Leave a Reply

换一张