第四章总结：页面组件

最新推荐文章于 2024-07-08 11:11:44 发布

G168Z

最新推荐文章于 2024-07-08 11:11:44 发布

阅读量1.5k

点赞数 38

文章标签：微信小程序

本文链接：https://blog.csdn.net/G168Z/article/details/136818317

版权

一：组件的定义及属性

id：组件的唯一表示，保持整个页面唯一。
class：组件里的样式类，在对应的WXSS中定义的样式类。
style：组件的内联样式，可以动态设置的内联样式。使用方式同HTML标签style属性。
hidden：组件是否显示，所有组件默认显示。
data-*：自定义属性，组件上触发事件时，会发送给事件处理函数。事件处理函数可以通过datascl获取。
bind*/catch*：组件的事件，绑定逻辑层相关事件处理函数。bind为冒泡事件，catch为非冒泡事件。

组件语法格式如下：

<标签名属性名="属性值">内容...</标签名>

二：容器视图组件

2.1：view

<view/>是一个块级容器组件，没有特殊功能，主要用于布局展示，是布局中最基本的UI组件，任何一种复杂的布局都可以通过嵌套<view/>组件，设置相关WXSS实现。<view/>支持常用的CSS布局属性，如display、float、position甚至Flex布局等，熟悉DIV+CSS的人应该很容易上手

<view/>具备一套关于点击行为的属性：

hover:是否启动点击态，默认值为false
hover-class:指定按下去的样式，当hover-class="none"时，没有点击态效果，默认值为none
hover-start-time:按住多久出现点击态，单位毫秒，默认值为50
hover-stay-time:手指松开后点击态保留时间，单位毫秒，默认值为400

<view style="border:1px solid red;">
<view class="item">1</view>
<view class="item">2</view>
<view class="item">3</view>
</view>
<view style="border:1px solid red;" class="o">
<view class="item" >1</view>
<view class="item" >2</view>
<view class="item" >3</view>
</view>

<view  class="oo">
<view class="cc"  >1</view>
<view class="cc" style="flex-shrink: 1;">2</view>
<view class="cc" style="flex-shrink: 2;">3</view>
<view class="cc" style="flex-shrink: 3;">4</view>
</view>

2.2：scroll-view

在布局过程中，我们需要一些容器具备可滑动的能力，尽管我们可以通过给<view/>设置overflow:scroll属性来实现，但由于小程序实现原理中没有DOM概念，我们没法直接监听<view/>滚动、触顶、触底等事件，这时便需要使用<scroll-view/>。<scroll-view/>在<view/>基础上增加了滚动相关属性，通过设置这些属性，我们能响应滚动相关事件。<scroll-view/>属性如下：

scroll-x:允许横向滚动，默认为false
scroll-y:允许纵向滚动，默认为false
upper-threshold:距顶部/左边多远时(单位px)，触发scrolltoupper事件，默认值为50
lower-threshold:距底部/右边多远时(单位px)，触发scrolltolower事件，默认值为50
scroll-top:设置竖向滚动条位置
scroll-left:设置横向滚动条位置
scroll-into-view:值应为某子元素id，滚动到该元素时，元素顶部对齐滚动区域顶部
bindscrolltoupper:滚动到顶部/左边，会触发scrolltoupper事件
bindscrolltolower:滚动到底部/右边，会触发scrolltolower事件
bindscroll:滚动时触发，event.detail = {scrollLeft,scrollTop,scrollHeight,scrollWidth,deltaX,deltaY}
目前，有些组件不能在<scroll-view/>中使用:<textarea/>、<video/>、<map/>、<convas/>

<!--pages/l3_zujian/l3_zujian.wxml-->
<view wx:for="{{colorList}}" wx:key="index" class="num-item" style="background-color: rgba({{item}});">{{item}}</view>


/* pages/l3_zujian/l3_zujian.wxss */

.num-item{
  border: 1rpx solid #efefef;
border-radius: 8rpx;
line-height: 200rpx;
margin: 15rpx;
text-align: center;
text-shadow: 0rpx 0rpx 5rpx #fff;
box-shadow: 1rpx 1rpx 6rpx #aaa;
}



// pages/l3_zujian/l3_zujian.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
colorList:[]//随机颜色的列表
,isloding:false,

  },

  getColors(){
    this.setData({
      isloding:true
    })
//1. 需要展示loading效果
wx.showLoading({
  title: '数据加载中...',
})

    wx.request({
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method:'GET',
      success:({data:res}) => {
        this.setData({
         
colorList:[...this.data.colorList,...res.data]

        })
      },
      complete:()=>{
        wx.hideLoading()//2.隐藏loading效果
        this.setData({
          isloding:false
        })
      }
    })
  }
  ,
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
this.getColors()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
console.log(this.data.colorList);
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    if (this.data.isloding) {
      return
    }
    this.getColors()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

2.3: swiper

滑块视图容器在前端开发中是一个常见组件，利用它我们可以实现轮播图、滑动页面、图片预览效果等。一个完整的滑块视图组件由<swiper/>和<swiper-item/>连个标签组成，它们不能单独使用，一个<swiper/>中只能放置一个或多个<swiper-item>，放置其他节点会被删除，<swiper-item/>内部能放置任何组件，默认宽高自动设置为100%。<swiper-item/>组件作为容器没有任何特殊属性，<swiper/>组件属性如下：

indicator-dots:是否显示面板指示点，默认值为false
autoplay:是否自动切换，默认为false
current:当前所在页面的index，默认值为0
interval:自动切换时间间隔，默认值为5000
duration:滑动动画时长，默认值为1000
circular:是否采用衔接动画，默认值为false
bindchange:current改变时会触发change事件，event.detail={current:current};

<!--pages/zlfw1/zlfw1.wxml-->
<text>pages/zlfw1/zlfw1.wxml</text>
<swiper autoplay circular indicator-dots interval="800" indicator-color="#fff" indicator-active-color="#f3514f">
  <swiper-item class="zlfw">
   1
  </swiper-item>

  <swiper-item class="zlfw2">
   2
  </swiper-item>

  <swiper-item class="zlfw3">
   3
  </swiper-item>

</swiper>



/* pages/zlfw1/zlfw1.wxss */
swiper{
  background-color: green;
}
.zlfw,.zlfw2,.zlfw3{
  font-size: 120rpx;
  color: pink;
  text-align: center;
}
.zlfw2{
  background-color: blueviolet;
}
.zlfw3{
  background-color: yellow;
}

三：基础内容组件

3.1：icon图标组件
微信小程序提供了丰富的图标组件，可以应用于不同的场景。

<!--pages/zujian/zujian.wxml-->
<view>icon类型：
<block wx:for="{{iconType}}">
  <icon type="{{item}}"/>{{item}}
</block>
</view>
<view>icon大小：
<block wx:for="{{iconSize}}">
  <icon type="success" size="{{item}}"/>{{item}}
</block>
</view>
<view>icon颜色：
<block wx:for="{{iconColor}}">
  <icon type="success" size="30" color="{{item}}"/>{{item}}
</block>
</view>

3.2： text文本组件
text文本组件支持转义字符"",比如换行符\n、空格符\t

3.3：progress进度条组件
进度条可以提高用户的体验，可通过该组件看到视频长度，已观看长度…

四：表单组件

4.1 button

<button>为按钮组件，是常用的表单组件之一，用于事件的触发以及表单的提交。其属性表如下所示。

<!--pages/biaodan/biaodan.wxml-->
<text>pages/biaodan/biaodan.wxml</text>
<button type="default">type:default</button>
<button type="primary">type:primary</button>
<button type="warn">type:warn</button>
<button type="default" bind:tap="buttonSize" size="{{size}}">改变size</button>
<button type="default" bind:tap="buttonPlain" plain="{{plain}}">改变plain</button>
<button type="default" bind:tap="buttonLoading" loading="{{loading}}">改变loading</button>

// pages/biaodan/biaodan.js
// 是否显示镂空
buttonPlain(){
  this.setData({plain:!this.data.plain})
},
// 是否显示loading图案
buttonLoading(){
  this.setData({loading:!this.data.loading})
},

4.2 radio

<radio>为单选框组件，往往需配合<radio-group>组件来使用，<radio>标签嵌套在<radio-group>当中。

<radio-group>组件属性如下：

<radio>组件属性如下：

<!--pages/biaodan/biaodan.wxml-->
<text>单选按钮:radio-group</text>
<view>请选择城市：</view>
<radio-group bindchange="citychange">
  <radio value="西安"/>西安
  <radio value="北京"/>北京
  <radio value="上海"/>上海
  <radio value="广州"/>广州
  <radio value="深圳"/>深圳
</radio-group>
<view>你的选择：{{city}}</view>
<view>选择计算机语言</view>
<radio-group bindchange="raidochange" class="radio-group">
  <label wx:for="{{radios}}" class="radio">
  <radio value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}
  </label>
</radio-group>
<view>你的选择：{{lang}}</view>


// pages/biaodan/biaodan.js

radios:[{name:'java',value:'JAVA'},{name:'python',value:'python',checked:'true'},
{name:'php',value:'PHP'},{name:'swif',value:'Swif'}],city:'',lang:'',

citychange(event){
  this.setData({city:event.detail.value})
  // console.log(event.detail.value);
},
raidochange(event){
  this.setData({lang:event.detail.value})
  console.log(event.detail.value);
},

4.3 checkbox

<checkbox>为复选框组件，常用于在表单中进行多项数据的选择。复选框的<checkbox-group>为父控件，其内部嵌套若干个<checkbox>子控件。

<checkbox-group>属性如下：

<checkbox>组件的属性如下：

<text>多选按钮:</text>
<view>选择你要去的城市：</view>
<checkbox-group bindchange="cityChange">
  <label wx:for="{{citys}}">
  <checkbox value="{{item.value}}" checked="{{item.checked}}"/>
  {{item.value}}
  </label>
</checkbox-group>
<view>你选择的城市是：{{city2}}</view>

citys:[
  {name:'km',value:'昆明'},
{name:'sy',value:'三亚'},
  {name:'zh',value:'珠海',checked:'true'},
  {name:'dl',value:'大连'}],city2:'',
cityChange(event){
  this.setData({city2:event.detail.value}) 
  console.log(event.detail.value);
},

4.4 switch

<switch>为开关选择器，常用于表单上地开关功能，属性表如下所示。

4.5 `slider`

<slider>为滑动选择器，用于可视化地动态改变某变量地取值。属性表如下：

4.6 picker

在微信小程序中，picker组件的功能就是下拉框，在小程序的设计中会经常用到。

属性：

除了上述通用的属性，对于不同的mode，picker拥有不同的属性。
普通选择器：mode = selector

多列选择器：mode = multiSelector

时间选择器：mode="time"

日期选择器：mode="date"

省市区选择器：mode="region"

4.7 picker-view

picker-view 即嵌入页面的滚动选择器。

4.8 input

<input>为输入框组件，常用于文本(如姓名、年龄等信息)的输入。属性表如下：

4.9 `textarea`

<textarea>为多行输入框，常用于多行文字的输入。

4.10 label

<label>是标签组件，不会呈现任何效果，但是可以用来改进表单组件的可用性。当用户在label元素内点击文本时，就会触发此控件，即当用户选择该标签时，事件会传递到和标签相关的表单控件上，可以使用for属性绑定id,也可以将空间放在该标签内部，该组件对应属性如下所示。

4.11 form

<form>为表单控件组件，用于提交表单组件中的内容。<form>控件组件内部可以嵌套多种组件。

组件属性如下：

<!--pages/formbd/formbd.wxml-->
<form bindsubmit="formSubit" bindreset="formReset">
  <view>姓名：
  <input type="text" name="xm"/>
  </view>
  <view>性别：
  <radio-group name="xb">
    <label >
    <radio value="男" checked/>男
    </label>
    <radio value="女"/>女
  </radio-group>
  </view>

<view>爱好：
<checkbox-group name="hobby">
  <label wx:for="{{hobbies}}">
  <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.value}}</checkbox>
  </label>
</checkbox-group>
</view>
<button form-type="submit">提交</button>
<button form-type="reset">重置</button>
</form>


// pages/formbd/formbd.js
Page({ hobby: '',data: {
hobbies:[{name:'jsj',value:'计算机',checked:'true'},
{name:'music',value:'听音乐'},
{name:'game',value:'玩电竞'},
{name:'swim',value:'游泳',checked:'true'}
], } formSubmit(e){
console.log('form发生了submit事件，携带数据为：',e.detail.value);
},
formReset(){
  console.log('form发生了reset事件');
},})

五：多媒体组件

本章节介绍微信小程序已支持的多媒体资源，分别为 image（图片）、camera（照相机）、audio（音频）、video（视频）等媒体组件。

5.1 image

image组件为图像组件，与HTML中的<img/>类似

src - 图片资源地址字符串，String 类型，无默认值；
mode - 图片裁剪、缩放的模式，String 类型，默认值为 'scaleToFill' ；
lazy-load - 图片懒加载（只针对 page 与 scroll-view 下的 image 有效），Boolean 类型，默认值为 false ；
binderror - 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}， HandleEvent 类型，无默认值；
binderror - 当错误发生时，发布到 AppService 的事件名，事件对象event.detail = {errMsg: 'something wrong'}， HandleEvent 类型，无默认值；

有了这 5 种属性，开发者在提供了有效的资源地址后，可以决定是否让图片进行懒加载、如何裁剪和缩放图片、捕获图片加载过程出错事件和图片加载完毕事件。加载出错时可以获知出错原因，加载完毕时可以获取图片原始宽高.

5.2 audio

audio组件用来实现音乐播放，暂停

id - audio 组件的唯一标识， String 类型，无默认值
src - 音频资源地址，String 类型，无默认值；
loop - 是否循环播放，Bollean 类型，默认值为 false ；
controls - 是否显示默认控件，Boolean 类型，默认值为 false；
poster - 默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效，无默认值；
name - 默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效，无默认值；
author - 默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效，无默认值；
binderror - 当发生错误时触发 error 事件，detail = {errMsg:
MediaError.code}
bindplay - 当开始 / 继续播放时触发 play 事件；
bindpause - 当暂停播放时触发 pause 事件；
bindtimeupdate - 当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration} ;
bindended - 当播放到末尾时触发 ended 事件。

5.3 video

video用来实现视频的播放，暂停

<!--pages/formbd/formbd.wxml-->
<video src="{{src}}" controls/>
<view class="btn-area">
<button bind:tap="bindButtonTap">获取视频</button>
</view>

// pages/formbd/formbd.js
  data: {src:'',},

bindButtonTap(){
  var thar=this
  wx.chooseVideo({
    sourceType:['album','camera'],
    maxDuration:60,
    camera:['front','back'],
    success:function(res){
      thar.setData({src:res.tempFilePath})
    }
  })
},

5.4 camera

camera组件为系统相机组件，可以实现拍照或录像功能

<!--pages/formbd/formbd.wxml-->
<camera mode="normal" device-position="back" flash="odd" binderror="error" style="width: 100%; height: 350px;"/>
<button type="primary" bind:tap="takephoto">点击拍照</button>
<view>预览</view>
<image src="{{src}}" mode="widthFix"/>

// pages/formbd/formbd.js

  takephoto(){
    const ctx=wx.createCameraContext()//创建并返回camera上下为对象
    ctx.takePhoto({
      quality:'high',
      success:(res)=>{
        this.setData({src:res.tempImagePath})
      }
    })
  },
  error(e){
    console.log(e.detail);
  },

六：其他组件

6.1 map

map组件用于在页面中显示地图或路径，常用于LBS（基于位置服务）或路径指引，能相对百度地图，高德地图，高德地图比较简单，目前具备绘制图标，路线，半径等能力，不能在croll-view，swiper，picker-view，movable-view组件中使用

6.2 canvas

canvas组件用来绘制图案，相当于一块无色透明的普通图布

<!--pages/formbd/formbd.wxml-->
<canvas canvas-id="myCanvas" style="border: 1px solid red;"/>


// pages/formbd/formbd.js
onLoad(options) {
    var ctx=wx.createCanvasContext('myCanvas')
    ctx.setFillStyle('red')
      ctx.fillRect(10,10,200,100)
      ctx.draw()},

G168Z

关注

38
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
第四章总结：页面组件

id：组件的唯一表示，保持整个页面唯一。class：组件里的样式类，在对应的WXSS中定义的样式类。style：组件的内联样式，可以动态设置的内联样式。使用方式同HTML标签style属性。hidden：组件是否显示，所有组件默认显示。data-*：自定义属性，组件上触发事件时，会发送给事件处理函数。事件处理函数可以通过datascl获取。bind*/catch*：组件的事件，绑定逻辑层相关事件处理函数。bind为冒泡事件，catch为非冒泡事件。
复制链接

扫一扫