第四章 页面组件总结

已于 2024-03-29 10:21:40 修改
阅读量838 收藏 27
点赞数 25
文章标签： 前端 javascript 开发语言
于 2024-03-29 10:21:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2402_83179007/article/details/136803004
版权

4.1组件的定义及属性

        组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了视图容器、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类（30多个）基础组件。

         每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：

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

组件通过属性来进一步细化。不同的组件可以有不同的属性，但它们也有一些共用属性，如id、class、style、hidden、data- *、bin nd * /catch *等。
id 组件的唯一表示，保持整个页面唯一，不常用。
class    组件的样式类，对应WXSS中定    义的样式。    
style    组件的内联样式，可以动态设置    内联样式。    
hidden组件是否显示，所有组件默认显示
data - *自定义属性，组件触发事件时，会发送给事件处理函数。事件处理函数可以通过传入参数对象的currentTarget. dataset方式来获取自定义属性的值。
bind * /catch *    组件的事件，绑定逻车    辑层相关事件处理函数。

4.2容器试图组件

        容器视图组件是能容纳其他组件的组件，是构建小程序页面布局的基础组件，主要包括 view、scroll -view和swiper组件。

4.2.1view

        view组件是块级组件，没有特殊功能，    主要用于布局展示，相当于HTML中的div，是    
布局中最基本的用户界面(UserInterface,I JI)组件，通过设置view 的CSS属性可以实现各种复杂的布局。view组件的特有属性如下图：

 

 通过<view>组件实现页面布局示例代码如下：

 <view style="text-align: center">默认flex布局</view>
<view style="display: flex">
<view style="border: 1px solid #f00;flex-grow: 1">1</view>
<view style="border: 1px solid #f00;flex-grow: 1">2</view>
<view style="border: 1px solid #f00;flex-grow: 1">3</view>
</view>
<view style="text-align: center">上下混合布局</view>
<view style="display: flex;flex-direction: column;">
<view style="border: 1px solid #f00;flex-grow: 1">1</view>
<view style="display: flex;">
<view style="border: 1px solid #f00;flex-grow: 1">2</view>
</view>
<view style="border: 1px solid #f00;flex-grow: 2">3</view>
</view>
<view style="text-align: center">左右混合布局</view>
<view style="display: flex;">
<view style="border: 1px solid #f00;flex-grow: 1">1</view>
<view style="border: 1px solid #f00;flex-grow: 1">2</view>
</view>
<view style="border: 1px solid #f00;flex-grow: 2">3</view>

 运行结果：

4.4.2scroll-view

通过设置scroll-view组件的相关属性可以实现滚动视图的功能，其属性如表：

 (1)在使用竖向滚动时，如果需要给scrol - view 组件设置一个固定高度，可以通过 WXSS设置height 来完成。
(2)请勿在scroll-view组件中使用textarea a、map、canvas、video组件。(3) scroll - into - view属性的优先级高于sc croll - top.
(4)由于在使用scroll-view组件时会阻止页面回弹，所以在scroll-view组件滚动时无法触发onPullDownRefresh。
(5)如果要实现页面下拉刷新，请使用页j面的滚动，而不是设置scroll- view组件。这样做，能通过单击顶部状态栏回到页面顶部。
通过scroll-view组件可以实现下拉刷新和上拉加载更多，代码如下:

4.2.3swiper

       swiper组件可以实现轮播图、图片预览、滑动页面等效果。一个完整的swiper组件由<swiper/>和<swiper -item/>两个标签组成，它们不能单独使用。<swiper/>中只能放置一个或多个<swiper-item/>，若放置其他组件则会被删除;<swiper -item/>内部可以放置任何组件，默认宽高自动设置为100%    swiper组件的属性如表:

 <swiper-item/>组件为滑块项组件，仅可以被放置在<swiper/>组件中，宽高尺寸默认按100%显示。

设置swiper组件，可以实现轮播图效果，代码如下：

<swiper indicator-dots="true" autoplay="true" interval="2000" duration="1000">
     <swiper-item>
       <image src="../img/a.jpg" mode="" style="width: 100%;height: 100%;"/>
     </swiper-item>
     <swiper-item>
       <image src="../img/b.jpg" mode="" style="width: 100%;height: 100%;"/>
     </swiper-item>
     <swiper-item>
       <image src="../img/c.jpg" mode="" style="width: 100%;height: 100%;"/>
     </swiper-item>
</swiper>

运行结果

 4.3基础内容组件

基础内容组件包括icon、text和progress，主要用于在视图页面中展示图标、文本和进度条等信息。

4.3.1icon

icon组件即图标组件，通常用于表示一种状态，如success、info、warn、waiting、cancel等。其属性如表：

 示例代码如下：

index.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 >

 index.js：

//icon.js
//pages/icon/icon.js
Page({ 
  data:{
  iconType:[ "success"," success_no_circle","info"," warn"," wait- ing","cancel","download","search","clear"],
  iconSize:[10,20,30,40],
  iconColor:['#f00','#0f0','#00f']
}
  })

 运行结果：

 4.3.2 text

text组件用于展示内容，类似HTML中的<span>,text组件中的内容支持长安选中，支持转义字符“\”，属于行内元素。text组件的属性如表：

 示例代码如下：

index.wxml

<block wx:for="{{x}}"wx:for-item="x">
  <view class="aa">
  <block wx:for="{{25-x}}"wx:for-item="x">
    <text decode="{{true}}"space="{{true}}">&nbsp;</text>
  </block>
  <block wx:for="{{y}}"wx:for-item="y">
    <block wx:if="{{y<=2*x-1}}">
      <text>*</text>
    </block>
  </block>
  </view>
</block>

<block wx:for="{{x}}"wx:for-item="x">
  <view class="aa">
  <block wx:for="{{19+x}}"wx:for-item="x">
    <text decode="{{true}}"space="{{true}}">&nbsp;</text>
  </block>
  <block wx:for="{{y}}"wx:for-item="y">
    <block wx:if="{{y<=11-2*x}}">
      <text>*</text>
    </block>
  </block>
  </view>

 index.js

Page({
  data:{
    x:[1,2,3,4,5],
    y:[1,2,3,4,5,6,7,8,9]
  }
})

 运行结果

4.3.3 progress

progress组件用于显示进度状态，如资源加载、用户资料完成度、媒体资源播放进度等。

progress组件属性块级元素，其属性如表:

 示例代码如下：

<view>显示百分比</view>
<progress percent="80"show-show-info="80"></progress>
<view>改变宽度</view>
<progress percent="50"stroke-width="2"></progress>
<view>自动显示进度条</view>
<progress percent="80" active></progress>

 运行结果

4.4 表单组件

表单组件的主要功能是收集用户信息，并将这些信息传递给后台服务器，实现小程序与用户之间的沟通。表单组件不仅可以放置在<form/>标签中使用，还可以作为单独组件和其他组件混合使用。

4.4.1button

button 组件用来实现用户和应用之间的交互，同时按钮的颜色起引导作用。一般来说
在一个程序中一个按钮至少有3种状态:默认点击(default)、建议点击(primary)、谨慎点击(warn)。在构建项目时，应在合适的场景使用合适的按钮，当<buton>被<form/>包裹时，可以通过设置form-type 属性来触发表单对应的事件。buton组件的属性如表所示：

 示例代码如下：

index.wxml

<button type="default">type:default</button>
<button type="primary">type:primary</button>
<button type="warn">type:warn</button>
<button type="default" bindtap="buttonSize" size="{{size}}">改变size</button>
<button type="default" bindtap="buttonPlain" plain="{{plain}}">改变plain</button>
<button type="default" bindtap="buttonLoading" loading="{{loading}}">改变loading显示</button>

index.js

//radio.js
Page({
  data:{
  radios:[
  {name:'java',value:'JAVA'},
  {name:'python',value:'python',checked:'true'},
  {name:'php',value:'PHp'},
  {name:'swif',value:'Swif'},
  ],
  city:"",
  lang:""
  },
  citychange:function(e){
  this.setData({city:e.detail.value});
  },
  radiochange:function(event){
  this.setData({lang:event.detail.value});
  console.log(event.detail.value)
  }
})

运行结果

 4.4.2radio

单选框用来从一组选项中选取一个选项。在小程序中，单选框由<radio-group/>(单项选择器)和<radio/>(单选项目)两个组件组合而成，一个包含多个<radio/>的<radio-group/>表示一组单选项，在同一组单选项中<radio/>是互斥的，当一个按钮被选中后，之前选中的按钮就变为非选。它们的属性如表所示：

 示例代码如下：

index.wxml:

<view>选择您喜爱的城市:</view>
<radio-group bindchange="citychange">
<radio value="西安">西安</radio>
<radio value="北京">北京</radio>
<radio value="上海">上海</radio>
<radio value="广州">广州</radio>
<radio value="深圳">深圳</radio>
</radio-group>
<view>你的选择:{{city}}</view>

<view>选择您喜爱的计算机语言:</view>
<radio-group class="radio-group" bindchange="radiochange">
<label class="radio" wx:for="{{radios}}">
<radio value="{{item.value}}"checked="{{item.checked}}"/>
{{item.name}}
</label>
</radio-group>
<view>你的选择:{{lang}}</view>

index.js:


Page({
  data:{
  radios:[
  {name:'java',value:'JAVA'},
  {name:'python',value:'python',checked:'true'},
  {name:'php',value:'PHp'},
  {name:'swif',value:'Swif'},
  ],
  city:"",
  lang:""
  },
  citychange:function(e){
  this.setData({city:e.detail.value});
  },
  radiochange:function(event){
  this.setData({lang:event.detail.value});
  console.log(event.detail.value)
  }
})

 运行结果

 4.4.3checkbox

复选框用于从一组选项中选取多个选项，小程序中复选框由 <checkbox -group/ >（多项选择器）和<checkbox/ >（多选项目）两个组件组合而成。一个<checkbox-group/ >表示一组选项，可以在一组选项中选中多个选项属性如表：

 示例代码如下：

index.wxml:

<view>选择您想去的城市:</view >
<checkbox-group bindchange ="cityChange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}" 
checked ='{{item.checked}}'>
{{item.value}}
</checkbox>
</label>
</checkbox-group>
<view>您的选择是:{{city}}</view>

index.js:

Page({
  city:"",
   data:{ 
     citys:[
    {name:'km',value:'昆明'},
    {name:'sy',value:'三亚'},
   {name:'zh',value:'珠海',checked:'true'}, 
   {name:'dl',value:'大连'}]
     },
    cityChange:function(e){
    console.log(e.detail.value);
     var city = e.detail.value; 
     this.setData({city:city})
    }
    })

运行结果

 4.4.4switch

     switch组件的作用类似于开关选择器，其属性如表：

 示例代码如下：

index.wxml:

<view>
<switch bindchange = "swl">{{varl}}</switch>
</view>
<view>
<switch checked bindchange="sw2">{{var2}}</switch>
</view>
<view>
<switch type="checkbox" bindchange="sw3">{{var3}}</switch>
</view>

 index.js:

Page({
  data:{
  var1:'关',
  var2:'开',
  var3:'未选'
  },
  swl:function(e){
  this.setData({var1:e.detail.value?'开':'关'})
},
  sw2:function(e){
  this.setData({var2:e.detail.value?'开':'关'})
},
  sw3:function(e){
  this.setData({var3:e.detail.value?'已选':'未选'})
  }
})

 运行结果

4.4.5slider组件为滑动选择器，可以通过滑动设置相应的值 ，其属性如表：

 代码如下：

index.wxml:

<view>默认min=0 max=100 step =1 </view>
<slider></slider>
<view>显示当前值</view>
<slider show-value></slider>
<view>设置min=20 max=200 step=10</view >
<slider min ='0'max='200'step ='10'show-value ></slider>
<view>背景条红色,已选定颜色绿色</view>
<slider color ="#f00" selected-color ='#f0'></slider >
<view>滑动改变icon 的大小</view>
<slider show-value bindchange='sliderchange'>
</slider><icon type="success" size='{{size}}'></icon >

index.js:

Page({
  data:{
  size:'20'
  },
  sliderchange:function(e){
  this.setData({size:e.detail.value})
  }
})

运行结果：

4.4.6picker

picker组件为滚动选择器 ，当用户点击picker组件时，系统从底部弹出选择器供用户选择。picker组件目前支持5种选择器，分别是：selector（普通选择器）、multi Selector（多列选择器）、time（时间选择器）、date（日期选择器）、region（省市选择器）。

1.普通选择器

普通选择器（mode=selector）的属性如表：

 示例代码如下：

index.wxml:

<view>----range为数组---</view>
<picker range="{{array}}"value="{{index1}}"bindahange='arrayChange'>
当前选择：{{array[index1]}}
</picker>
<view>---range为数组对象--</view>
<picker
bindchange="objArrayChange" value="{{index2}}"range-range-key="name"range="{{objArray}}">
当前选择:{{objArray[index2].name}}
</picker>

index.js:

Page({
data:{
  array:['Java','Python','C','C#'],
  objArray:[
    {id:0,name:'Java'},
    {id:1,name:'Python'},
    {id:2,name:'C'},
    {id:3,name:'C#'}
  ],
  index1:0,
  index2:0
},
arrayChange:function(e){
  console.log('picker值变为', e.detaail.value)
  var index = 0;
  this.setData({
    index1:e.detaail.value
  })
},
objArrayChange:function(e){
  console.log('picker值变为',e.detaail.value)
  this.setData({
    index2:e.detaail.value
  })
}
})

运行结果：

2.多列选择器

多列选择器（mode=multiSelector）允许用户从不同列中选择不同的选择项，其选项是二维数组或数组对象。多列选择器的属性如表：

示例代码如下：

index.wxml:

<view>多列选择器</view>
<picker mode="multiSelector" bindchange="bindMultiPickerChang" blindcolumnchange="bindMultiPickerColumnChang" value="{{multiIndex}}"
range="{{multiArray}}">
<view>
当前选择：{{multiArray[0][multiIndex[0]]}},{{multiArray[1][multiIndex[1]]}},{{multiArray[2][multiIndex[2]]}}
</view>
</picker>

index.js:

Page({
  data:{
    multiArray:[['陕西省','广东省'],['西安市','汉中市','延安市'],['雁塔区','长安区']],
    multiIndex:[0,0,0]
  },
  bindMultiPickerChang:function(e){
    console.log('picker发送选择改变，携带值为',e.detail.value)
    this.setData({
      multiIndex:e.detail.value
    })
  },
  bindMultiPickerColumnChang:function(e){
    console.log('修改的列为',e.detail.column,',值为',e.detail.value);
    var data={
      multiArray:this.data.multiArray,
      multiIndex:this.data.multiIndex
    };
    data.multiIndex[e.detail.column]=e.detail.value;
    switch(e.detail.column){
      case 0:
      switch(data.multiIndex[0]){
       case 0:
      data.multiArray[1]=['西安市','汉中市','延安市'];
      data.multiArray[2]=['雁塔区','长安区'];
      break;
      case 1:
      data.multiArray[1]=['深圳市','珠海市'];
      data.multiArray[2]=['南山区','罗湖区'];
      break;
    }
    data.multiIndex[1]=0;
    data.multiIndex[2]=0;
    break;
    case 1:
    switch(data.multiIndex[0]){
      case 0:
      switch(data.multiIndex[1]){
        case 0:
        data.multiArray[2]=['雁塔区','长安区'];
        break;
        case 1:
        data.multiArray[2]=['汉台区','南郑区'];
        break;
        case 2:
        data.multiArray[2]=['宝塔区','子长县','延川县'];
        break;
      }
      break;
      case 1:
      switch(data.multiIndex[1]){
        case 0:
        data.multiArray[2]=['南山区','罗湖区'];
        break;
        case 1:
        data.multiArray[2]=['香洲区','斗门区'];
        break;
      }
      break;
    }
    data.multiIndex[2]=0;
    console.log(data.multiIndex);
    break;
  }
  this.setData(data);
  }
})

 运行结果：

 3.时间选择器、日期选择器

时间选择器（mode-time）可以用于从提供的时间选项中选择相应的时间，其属性如表：

 日期选择器（mode=time）可以用于从提供的时间选项中选择相应的时间，其属性如表：

 示例代码如下：

index.wxml:

<view>
<picker mode="date" start="{{startdate}}" end="{{enddate}}" value="{{date}}" bindchange="changedate">
  选择的日期：{{date}}
</picker>
</view>
<view>
<picker mode="time" start="{{starttime}}" end="{{endtime}}" bindchange="changetime">
  选择的时间：{{time}}
</picker>
</view>

 index.js:

Page({
  data:{
    startdate:2000,
    enddate:2050,
    date:'2018',
    starttime:'00:00',
    endtime:'12:59',
    time:'8:00'
  },
  changedate:function(e){
    this.setData({data:e.detail.value});
    console.log(e.detail.value)
  },
  changetime:function(e){
    this.setData({time:e.detail.value});
    console.log(e.detail.value)
  },
})

运行结果：

4.省市选择器

省市选择器（mode=region）是小程序的新版本提供的选择快速地区的组件，其属性如表：

示例代码如下：

index.wxml:

<picker mode="region" value="{{region}}"custom-item="{{custom-custom-omitem}}"bindahange="changeregion">
选择省市区:{{region[0]}},{{region[1]}},{{region[2]}}
</picker>

index.js:

Page({
  data:{
    region:['陕西省','西安市','长安区'],
    customitem:'全部'
  },
changeregion:function(e){
console.log(e.detail.value)
this.setData({
  region:e.detail.value
})
}
})

 运行结果：

 4.4.7picker-view

picker-view组件为嵌入页面的滚动选择器。相对于picker组件，picker-view组件的列的个数和列的内容由用户通过<picker-view-column/>自定义设置。picker-view组件的属性如表：

 示例代码如下：

index.wxml:

<view>
<picker mode="date" start="{{startdate}}" end="{{enddate}}" value="{{date}}" bindchange="changedate">
  选择的日期：{{date}}
</picker>
</view>
<view>
<picker mode="time" start="{{starttime}}" end="{{endtime}}" bindchange="changetime">
  选择的时间：{{time}}
</picker>
</view>

index.js:

Page({
  data:{
    startdate:2000,
    enddate:2050,
    date:'2024',
    starttime:'00:00',
    endtime:'12:59',
    time:'8:00'
  },
  changedate:function(e){
    this.setData({date:e.detail.value});
    console.log(e.detail.value)
  },
  changetime:function(e){
    this.setData({time:e.detail.value});
    console.log(e.detail.value)
  }
})

运行结果 

 

4.4.8input

input组件为输入框，用户可以输入相应的信息，其属性如表：

 示例代码如下：

index.wxml:

<input placeholder="这是一个可以自动聚焦的input"auto-focus/>
<input placeholder="这个只有按钮点击的时候才聚焦"focus="{{focus}}"/>
<button bind:tap="bindButtonTap">使得输入框获取聚焦</button>
<input maxlength="10" placeholder="最大输入长度为10"/>
<view class ="section_title">你输入的是:{{inputValue}}
<input bindinput="bindKeyInput" placeholder="输入同步到view中"/></view>
<input bindinput="bindReplaceInput" placeholder="连续的两个1会变成2"/>
<input password type="number"/>
<input password type="text"/>
<input type ="digit" placeholder="带小数点的数字键盘"/>
<input type ="idcard" placeholder="身份证输入键盘"/>
<input placeholder-style="color:red" placeholder="占位符字体是红色的"/>

index.js:

Page({
  data:{
    focus:false,
    inputValue:''
  },
  bindButtonTap:function(){
    this.setData({
      focus:true
    })
  },
  bindKeyInput:function(e){
    this.setData({
      inputValue:e.detail.value
    })
  },
  bindReplaceInput:function(e){
    var value = e.detail.value
    var pos = e.detail.cursor
    if(pos!=-1){
      var left = e.detail.value.slice(0,pos)
      pos = left.replace(/11/g,'2').length
    }
    return{
      value:value.replace(/11/g/'2'),
      cursor:pos
    }
  }
})

 运行结果：

4.4.9 textarea

textarea组件为多行输入框组件，可以实现多行内容的输入。textarea组件的属性如表：

 

示例代码如下：

index.wxml:

<textarea bindblur="bindTextAreaBlur" auto-height placeholder="自动变高"></textarea>
<textarea placeholder="placeholder 颜色是红色的" placeholder-style="color:red;"></textarea>
<textarea placeholder="这个只有在按钮点击的时候才聚焦" focus="{{focus}}"></textarea>
<button bind:tap="bindButtonTap">使得输入框获取焦点</button>
<form bindsubmit="bindFormSubmit">
<textarea placeholder="form中的textarea" name="textarea"></textarea>
<button form-type="submit">提交</button>
</form>

index.js:

Page({
  data:{
    height:10,
    focus:false
  },
  bindButtonTap:function(){
    this.setData({
      focus:true
    })
  },
  bindTextAreaBlur:function(e){
    console.log(e.detail.value)
  },
  binFormSubmit:function(e){
    console.log(e.detail.value.textarea)
  }
})

 运行结果：

 4.4.10 label

label组件为标签组件，用于提升表单组件的可用性。label组件支持使用for属性找到对应的id，或者将控件放在该标签下，当点击label组件时就会触发对应的控件。for属性的优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。

目前，label组件可以绑定的控件有<button/>、<checkbox/>、<radio/>、<switch/>。

示例代码如下：

index.wxml:

<view><checkbox></checkbox>中国</view>
<view><label><checkbox></checkbox>中国</label></view>
<checkbox-group bindchange="cityChange">
<label wx:for="{{citys}}">
<checkbox value="{{item.value}}"checked='{{item.checked}}'>
</checkbox>
</label>
</checkbox-group>
<view>您的选择是：{{city}}</view>

index.js:

Page({
     city:'',
      data:{
        citys:[
          {name:'km',value:'昆明'},
          {name:'sy',value:'三亚'},
        {name:'zh',value:'珠海',checked:'true'},
          {name:'dl',value:'大连'}]
      },
      cityChange:function(e){
        console.log(e.detail.value);
        var city=e.detail.value;
        this.setData({city:city})
      }
    })

运行结果：

 4.4.11 form

form组件为表单组件，用来实现将组件内的用户输入信息进行提交。当<from/>表单中formType为submit的<button/>组件时，会将表单组件中的value值进行提交。form组件的属性如表：

示例代码如下：

index.wxml:

<from bindsubmit="formSubmit" bindreset="formReset">
<view>姓名:
<input type="text" name="xm"/>
</view>
<view>性别:
<radio-group name="xb">
<label>
<radio value="男" checked/>男
</label>
<label>
<radio value="女"/>女</label>
</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>
</from>

index.js:

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

运行结果

 

4.5多媒体组件

多媒体组件包括image（）、audio（）、video（）、camera（）组件，使用这些组件，使用这些组件，可以让页面更具有吸引力。

4.5.1image

image组件为图像组件，与HTML中的<img/>类似，系统默认image组件的宽度为300px、高度为2250px，image组件的属性如表：

image组件中的mode属性有13种模式，其中缩放模式有4种，裁剪模式有9种。

1.缩放模式

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

（2）aspectFit 保持纵横比缩放图片，使图片的宽高完全显示出来。也就是说，可以将图片完整地显示出来。

（3）aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，在另一个方向会发生截取。

（4）widthFix 宽度不变，高度自动变化，保持原图宽高比不变。

示例代码如下：

index.wxml:

<block wx:for="{{modes}}">
<view>当前图片的模式是：{{item}}</view>
<image  mode="{{item}}"src="../img/a.png"style="width:100%,height:100%"/>
</block>

index.js:

Page ({
  data:{
    modes:['scaleToFill','aspectFit','aspectFill','widthFix']
  }
})

运行结果：

 2.裁剪模式

（1）top 不缩放图片，只显示图片的顶部区域。

（2）bottom 不缩放图片，只显示图片的底部区域。

（3）center 不缩放图片，只显示图片的中间区域。

（4）left 不缩放图片，只显示图片的左边区域。

（5）right 不缩放图片，只显示图片的右边区域。

（6）top_left 不缩放图片，只显示图片的左上边区域。

（7）top_right 不缩放图片，只显示图片的右上边区域。

（8）bottom_left 不缩放图片，只显示图片的左下边区域。

（9）bottom_right 不缩放图片，只显示图片的右下边区域。

示例代码如下：

index.wxml:

<block wx:for="{{modes}}">
<view>当前图片的模式是：{{item}}</view>
<image  mode="{{item}}"src="../img/b.png"style="width:100%,height:100%"/>
</block>

index.js:

Page({
  data:{
    modes:['top','center','bottom','left','right','top_left','top_right','bottom_left','bottom_right']
  }
})

运行结果：

4.5.2 audio 

audio组件用来实现音乐播放、暂停等，其属性如表：

示例代码如下：

index.wxml:

<audio src="{{src}}" action="{{action}}" poster="poster" name="{{name}}" author="{{author}}" loop controls></audio>
<button type="primary" bindtap="play">播放</button>
<button type="primary" bindtap="pause">暂停</button>
<button type="primary" bindtap="playRate">设置速率</button>
<button type="primary" bindtap="currentTime">设置当前时间（秒）</button>

index.js:

Page({
  data:{
    poster:'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSK.jpg?max_age=2592000',
    name:'你',
    author:'何',
    src:'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3? guid=ffffffff82def4af4b12d3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC4858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46',
  },
  play:function(){
 this.setData({
   action:{
     method:'play'
   }
 })
  },
  pause:function(){
    this.setData({
      action:{
        method:'pause'
      }
    })
  },
  playRate:function(){
    this.setData({
      action:{
        method:'setPlaybackRate',
        data:10
      }
    })
    console.log('当前速率：'+this.data.action.data)
  },
  currentTime:function(e){
    this.setData({
      action:{
        method:'setCurrentTime',
        data:120
      }
    })
  }
})

运行结果

4.5.3video

video组件用来实现视频的播放、暂停等。视频的默认宽度为300px，高度为225px，video组件的属性如表：

示例代码如下：

index.wxml:

<video src="{{src}}" controls></video>
<view class="btn-area">
<button bindtap="bindButtonTap">获取视频</button>
</view>

index.js:

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

运行结果

 

4.5.4camera

camera组件为系统相机组件，可以实现拍照或录像功能。在一个页面中只能有一个camera组件。在开发者工具中运行时，使用电脑摄像头实现拍照或录像；在手机中运行时，使用手机前后摄像头实现拍照或录像。camera属性如表：

 示例代码如下：

index.wxml:

<camera device-position="back" flash="off" binderror="error" style="width: 100%;height: 350px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image src="{{src}}" mode="widthFix"/>

index.js:

Page({
  takePhoto(){
    const ctx=wx.createCameraContext()
    ctx.takePhoto({
      quality:'high',
      success:(res)=>{
        this.setData({
          src:res.tempImagePath
        })
      }
    })
  },
  error(e){
    console.log(e.detail)
  }
})

 运行结果

4.6其他组件

在小程序中，除了前面介绍的组件以外，map组件和canvas组件比较常用。

4.6.1map

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

map组件的属性如表：

map组件的markers属性用于在地图上显示标记的位置，其相关属性如表：

map组件的polyline属性用来指定一系列坐标点，从数组第一项连线到最后一页，形成一条路线，可以指定线的颜色、宽度、线型以及是否带箭头等，其相关属性如表：

示例代码如下：

index.wxml:

<map id="map"
longitude="108.9200"
latitude="34.1550"
scale="14"
controls="{{controls}}"
bindcontroltap="controltap"
markers="{{markers}}"
bindmarkertap="markertap"
polyline="{{polyline}}"
bindregionchange="regionchange"
shoe-location
style="width: 100%;height: 300px;"
>
</map>

index.js:

Page({
  data:{
    markers:[{
      iconPath:"../img/d.jpg",
      id:0,
      longitude:"108.9290",
      latitude:"34.1480",
      width:50,
      height:50
    }],
    polyline:[{
      points:[
        {
          longitude:"108.9290",
          latitude:"34.1400"
        },
        {
          longitude:"108.9290",
          latitude:"34.1400"
        },
        {
          longitude:"108.9290",
          latitude:"34.1400"
        },
      ],
      color:"#00ff00",
      width:2,
      dottedLine:true
    }],
    controls:[{
      id:1,
      iconPath:"../img/d.jpg",
      position:{
        left:0,
        top:300,
        width:30,
        height:30
      },
      clickable:true
    }]
  },
  regionchange(e){
    console.log(e.type)
  },
  markertap(e){
    console.log(e.markerId)
  },
  controltap(e){
    console.log(e.controlId)
  }
})

运行结果：

2、canvas 
       canvas 组件用来绘制图形，相当于一块无色透明的普通图布。canvas组件本身并没有绘图能力，仅仅是图形容器，通过绘图API实现绘图图功能。在默认情况下，canvas组件的默认宽度为300px，高度为 225 px，同一页面中的car nvas-id 不能重复，否则会出错。

       canvas组件属性如下：

实现绘图需要三步：

（1）：创建一个canvas绘图上下文。

var ctx=wx.createCanvasContext('myCanvas')

（2）：使用canvas绘图上下文进行绘图描述。

ctx.setFillStyle('green')
ctx.fillRect(10,10,200,100)

 （3）：画图。

ctx.draw()

示例代码如下：

index.wxml:

<canvas canvas-id="myCanvas" style="border: 1px solid red;"></canvas>

index.js:

Page({
  onLoad:function(options){
    var ctx=wx.createCanvasContext('myCanvas') 
    ctx.setFillStyle('green')
    ctx.fillRect(10,10,200,100)
    ctx.draw()
  }
})

运行结果 

texyte'x'y

认真就怂
关注
  • 25
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part2
09-07
第4章 服务器控件属性 62 4.1 控件属性的作用 62 4.1.1 系统属性 62 4.1.2 自定义属性 62 4.2 简单属性 63 4.3 属性的设计时特性 64 4.4 复杂属性 67 4.4.1 概述 67 4.4.2 复杂属性的几种标记形式 67 4.4.3...
第四章页面组件总结
2402_83166971的博客
03-28 1416
组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类（30多个）基础组件。每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下：内容……< /标签名>组件通过属性来进一步细化。
页面组件（第四章总结）
2203_75575779的博客
03-18 846
组件是页面视图层(WXM）的基本组成单元，组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布开放能力等8类(30多个)基础组件。每一个组件都由一对标签组成，有开始标签和结束标签，内容放置在开始标签和结束标签之间，内容也可以是组件。组件的语法格式如下:组件通过属性来进一步细化+。
第四章总结（页面组件）
weixin_74842051的博客
03-20 806
组件是页面视图层(WXML) 的基本组成单元, 组件组合可以构建功能强大的页面结构。小程序框架为开发者提供了容器视图、基础内容、表单、导航、多媒体、地图、画布、开放能力等8类(30多个) 基础组件。每一个组件都由一对标签组成, 有开始标签和结束标签, 内容放置在开始标签和结束标签之间, 内容也可以是组件。组件的语法格式如下:内容 ...组件通过属性来进一步细化。
微信小程序第四章（页面组件总结）
weixin_73443435的博客
03-25 1046
组件是页面视图层（WXML）的基本组成单元，组件组合可以构建功能强大的页面结构。id：组件的唯一表示class：组件的样式类，对应WXSS中定义的样式、style：组件的内联样式，可以动态的设置内联样式hidden：组件是否显示，所有组件默认显示。data-* ：自定义属性，组件触发事件，会发送给事件处理函数。bind*/catch* ：组件的事件，绑定逻辑层相关的处理函数。
庖丁解牛 纵向切入ASP.NET 3.5控件和组件开发 part1
09-07
第4章 服务器控件属性 62 4.1 控件属性的作用 62 4.1.1 系统属性 62 4.1.2 自定义属性 62 4.2 简单属性 63 4.3 属性的设计时特性 64 4.4 复杂属性 67 4.4.1 概述 67 4.4.2 复杂属性的几种标记形式 67 4.4.3...
深入解析Windows操作系统 中文版 第四版 part 4
06-02
第4章 管理机制 4.1 注册表 4.2 服务 4.3 Windows管理规范 4.4 本章总结 第5章 启动和停机 5.1 引导过程 5.2 引导和启动问题的故障检查 5.3 停机 5.4 本章总结 第6章 进程、线程和作业 6.1 进程的内部机理 6.2 ...
庖丁解牛:纵向切入ASP.NET 3.5控件和组件开发技术
11-26
第4章 服务器控件属性 62 4.1 控件属性的作用 62 4.1.1 系统属性 62 4.1.2 自定义属性 62 4.2 简单属性 63 4.3 属性的设计时特性 64 4.4 复杂属性 67 4.4.1 概述 67 4.4.2 复杂属性的几种标记形式 67 4.4.3...
《深入解析Windows操作系统》中文版 第四版 part1
06-02
第4章 管理机制 4.1 注册表 4.2 服务 4.3 Windows管理规范 4.4 本章总结 第5章 启动和停机 5.1 引导过程 5.2 引导和启动问题的故障检查 5.3 停机 5.4 本章总结 第6章 进程、线程和作业 6.1 进程的内部机理 6.2 ...
SpringBoot项目打包分离高阶操作
Record Little
04-23 740
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 207
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 487
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
前端调用WebSocket协议接口获取数据
最新发布
m0_56023096的博客
04-29 163
createWs("测试数据", (res) => {
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 944
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 157
两个前端标签
前端实现将二进制文件流，并下载为excel文件
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
04-23 672
介绍了前端如何实现将二进制文件流解析并下载为excel文件，以及解决容易遇到的问题。
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 385
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
vue报错：Do not mutate vuex store state outside mutation handlers.
weixin_44021888的博客
04-25 314
vue报错：Do not mutate vuex store state outside mutation handlers.
navigateBack返回到组件页面，组件页面刷新列表
06-03
好的，针对您的问题，您可以在组件页面中使用微信小程序提供的 `navigateBack` 方法返回上一个页面，然后在 `onShow` 方法中刷新列表。具体实现可以参考以下示例代码： 在组件页面中使用 `navigateBack` 方法返回上一个页面： ```js wx.navigateBack({ delta: 1, // 返回的页面数，如果 delta 为 1，则返回上一个页面 success: function () { console.log('返回成功'); } }); ``` 在上一个页面的 `onShow` 方法中刷新列表： ```js onShow: function () { // 在这里调用刷新列表的方法 this.refreshList(); } ``` 其中 `refreshList` 方法为您自己实现的刷新列表的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值