微信小程序学习笔记三(常用的组件)

视图容器
view
属性名类型默认值说明
hover-classStringnone指定按下去的样式类,为none时,没有点击态效果
hover-stop-propagationBooleanfalse指定是否组织本节点的祖先节点出现点击态
hover-start-timeNumber50按住多久后出现点击态,单位毫秒
hover-stay-timeNumber400手指松开后点击态保留时间,单位毫秒
可滚动视图区域
scroll-view
属性名类型默认值说明
scroll-xBooleanfalse允许横向滚动
scroll-yBooleanfalse允许纵向滚动
upper-thresholdNumber50距顶部/左边多远时,触发scrolltoupper事件
lower-thresholdNumber50距底部/右边多远时,触发scrolltolower事件
scroll-topNumber设置竖向滚动条位置
scroll-leftNumber设置横向滚动条位置
scroll-into-viewString为某个子元素的id,设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animationBooleanfalse设置滚动条位置时,使用动画过渡
enable-back-to-topBooleanfalseIOS点击顶部状态栏,安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltoupperEventHandle滚动到顶部/左边,会触动scrolltoupper事件
bindscrolltolowerEventHandle滚动到底部/右边,会触动scrolltolower事件
bindscrollEventHandle滚动时触发该事件
滑动视图容器

如图所示:

(可以用来制作轮播图)
这里写图片描述

swiper
属性名类型默认值说明
indicator-dotsBooleanfalse是否显示小圆点
indicator-colorColor指示小圆点的颜色
indicator-active-colorColor当前选中的小圆点的颜色
autoplayBooleanfalse是否自动切换
currentNumber0当前所在滑块的index
current-item-idString“”当前所在滑块的item-id,不能被current同时被指定
intervalNumber5000自动切换时间间隔
durationNumber500滑动动画时长
circularBooleanfalse是否采用衔接滑动
verticalBooleanfalse滑动方向是否纵向
previous-marginNumber“0px”前边距,露出前一项的一部分
next-marginNumber“0px”后边距,露出后一项的一部分
display-multiple-itemsNumber1同时显示的滑块数量
skip-hidden-item-layoutBooleanfalse会否跳未显示的滑块布局
bindchangeEventHandlecurrent改变时,会触发change事件
bindanimationfinishEventHandle动画结束时触发
<swiper
    bindchange="changeSwiper"
    previous-margin='10rpx'
    next-margin='10rpx'
    interval='3000' circular='true' autoplay='true' 
    indicator-dots='true' indicator-color='red' 
    indicator-active-color='yellow'>
    <swiper-item item-id="item" wx:for="{{picSource}}" wx:for-item="item" wx:key="unique">
        <image src="{{item.link}}"></image>
    </swiper-item>
</swiper>
Page({
  data: {
      picSource: [
          {
              link: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
          },
          {
              link: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'
          },
          {
              link: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
          }
      ]
  },
  changeSwiper : function() {
      console.log("滑动了!!")
  }
})

movable-area

是 movable-view的可移动区域
  • 必须设置宽高,,不设置默认为10px

  • 属性名: scale-area 当里面的movable-view设置为支持双指缩放时,设置此值可将缩放手势生效区域修改为整个movable-area

  • movable-view 可移动的视图容器,在页面中可以拖拽滑动

<movable-area 
        scale-area="true" 
        style="background-color: rgba(255,0,0,0.1);width: 750rpx;height: 500rpx;">
        <movable-view
                  bindchange="changing" 
                  out-of-bounds="true"
                  inertia="true" direction="all" 
                  scale="true"
                  style="background-color: green;width: 50rpx;height: 50rpx;" >
    </movable-view>
</movable-area>

changing : function(e){
  /*
    其中有一个detail属性,可以显示当前滑块在滑块区域内的坐标值
  */ 
  console.log(e);
  console.log("我正在运动!!!");
 }

cover-view

覆盖在原生组件上的文本视图。

可覆盖的原生组件包括:map、video、canvas、camera。

只支持嵌套cover-view、cover-image。


<map>
    <cover-view>这是一张地图
        <cover-image src="http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg"></cover-image>
    </cover-view>
</map>
<!-- map是地图,cover-view的内容将显示在map上 -->

<video id="myVideo"  src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{{false}}" event-model="bubble">
   <cover-view class="controls">
        <cover-view class="play" bindtap="play">
            <cover-image class="img" src="/path/to/icon_play" /> 
        </cover-view>
    <cover-view class="pause" bindtap="pause">
        <cover-image class="img" src="/path/to/icon_pause" /> 
    </cover-view>
    <cover-view class="time">00:00</cover-view>
    </cover-view> 
</video>

play() {
      this.videoCtx.play()
},
pause() {
  this.videoCtx.pause()
 }

icon 图标

属性名类型说明
typeStringicon的类型:
success、success_no_circle、
info、warn、waiting、
cancel、download、search、clear
sizeNumbericon的大小,单位为px,默认为23
colorColoricon的颜色

这里写图片描述

    <view><icon type="success" size='30' color="red" /></view>
    <view><icon type="success_no_circle" size='35' color="green" /></view>
    <view><icon type="info" size='45' color='yellow' /></view>
    <view><icon type="warn" size='30' color="blue" /></view>
    <view><icon type="waiting" color="hotpink" /></view>
    <view><icon type="cancel" color="skyblue" /></view>
    <view><icon type="download" color="blue" /></view>
    <view><icon type="search" color="blue" /></view>
    <view><icon type="clear" color="blue" /></view>

text 文本

属性名类型说明
selectableBoolean文本是否可选
spaceString显示连续空格。
ensp:中文字符空格的一半大小、
emsp:中文字符空格大小、
nbsp : 根据字体设置的空格大小
decodeBoolean是否解码

注意:

decode可以解析  &nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp;。
progress 进度条
属性作用
percent百分比0-100
show-info在进度条右侧显示百分比
stroke-width设置进度条的宽度
color设置进度条的颜色 (不建议使用)
active-color已选择的进度条的颜色
backgroundColor未选择的进度条的颜色
active进度条从左往右的动画
active-modebackwards 动画从头播
forwards动画从上次结束点接着播
<progress style="margin-top: 20rpx;"></progress>
<progress style="margin-top: 20rpx;" percent='20' show-info='true'></progress>
<progress style="margin-top: 20rpx;" percent='40' color="pink"></progress>
<progress style="margin-top: 20rpx;" percent='60' active="true"></progress>
<progress style="margin-top: 20rpx;" percent='80' stroke-width='25'></progress>
button 按钮
属性作用
sizemini default
typeprimary warn default
loading是否带loading图标
form-typesubmit提交表单 reset重置表单
open-typecontact 打开客服会话、share、getUserInfo
hover-class表示聚焦时的类名
hover-start-time表示聚焦开始样式的时间间隔
hover-stay-time表示聚焦样式的停留时间

这里写图片描述


<button loading='true' type="primary" size="default"></button> -->

<button size="mini" type="warn" disabled='true' plain="true" >按钮a</button>

<button size="default" type="warn" form-type='share'>按钮a</button>

<button size="default" type="default" open-type=''>按钮a</button>

<button size="default" type="primary" 
        hover-class='hovering'
        hover-start-time='500'
        hover-stay-time='500'
        hover-stop-propagation='' hover-class=''>按钮a</button> 
checkbox-group

利用bindchange事件,当其中的checkbox状态发生变化时,就会触动事件,且,其中该事件的event中有个detail属性,中的value属性是一个数组。选中了的checkbox的数组

    <checkbox-group bindchange="changecheck">
        <checkbox value='aaa'></checkbox>aaa
        <checkbox checked='true' value='bbb'></checkbox>bbb
        <checkbox value='ccc'></checkbox>ccc
        <checkbox value='ddd'></checkbox>ddd
        <checkbox value='eee'></checkbox>eee
        <checkbox value='fff'></checkbox>fff
    </checkbox-group>
form表单

使用form表单,有bindsubmit和bindreset两个事件。

  1. 当form表单中formType为reset的按钮被点击时,会触动form表单的reset事件
  2. 当form表单中formType为submit的按钮被点击时,会触动form表单的submit事件
    会将表单组件的value值进行提交,且表单组件必须要有name属性的才能被提交,否则就不会有
  3. bindsubmit事件中的event中有个detail属性中有携带的数据的详细信息
<form bindsubmit='formSubmit' bindreset='formReset'>
      <view>用户名:
          <input name="username" placeholder='请输入用户名' />        
      </view>
      <switch name="gender" /><button formType="reset">reset</button>
      <button formType="submit">submit</button>
</form> 
  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值