Taro小程序·常用组件与API

Taro小程序·常用组件与API

组件

  1. 视图】view
<view class="" 
    id="标识符" 
    hidden="true隐藏" 
    data-custom="自定义数据属性" 
    hover-class="被点击时样式类" 
    hover-stop-propagation="阻止冒泡到父元素" 
    hover-start-time="123长按触发点击事件时间" 
    hover-stay-time="123点击后保持高亮时间" 
    animation="{{动画效果}}
">
  这是一个视图容器Ï
</view>
  1. 滚动区域】scroll-view
<scroll-view 、
    scrollTop="竖向滚动条位置" 
    scroll-x="true横向滚动
    upper-threshold="50" bindscrolltoupper="on距顶部触发事件配合upper-threshold"
    lower-threshold="50" bindscrolltolower="on距底部触发事件配合lower-threshold"
    enable-back-to-top="true通过快速滑动返回顶部"
    scroll-into-view="id滚动到相应位置"
    scroll-with-animation="true滚动时动画过渡"
    bindscroll="onScroll滚动时触发事件"
"></scroll-view>
  1. 轮播图】swiper
<swiper 
    indicator-dots="true显示指示点"
    autoplay="true自动切换"
    interval="123自动切换时间间隔"
    duration="123滑动动画时长"
    circular="true首尾无限循环"
    vertical="true竖向滚动"
    current="当前所在滑块的index"
    previous-margin="px可见滑块间距"
    next-margin="px可见滑块间距"
    display-multiple-items="同时显示的滑块数"
    bindchange="on滑块时触发事件"
></swiper>
  1. 文本】text
1.<text 
    selectable="true可选中文本"
    space="true保留空格和换行"
    decode="true特殊字符解码"
    size="12字体大小"
    color="字体颜色"
    bold="加粗字体"
    line-clamp="12显示行数"
    bindtap="on点击文本"
></text>
  1. 图标】icon

<icon type=”图标的类型” size=”rpx图标大小” color=”图标颜色” hover-class=”点击时图标样式类” hover-stop-propagation=”true点击时阻止事件” hover-start-time=”123点击时触发时间间隔” hover-stay-time=”123点击时触发时间间隔” bindtap=”on点击时触发事件” ></icon>

  1. 进度条】progress
<progress percent="进度百分比(0-100)"
    stroke-width="进度条的颜色"
    active="激活状态下进度条动画" active-mode="动画模式backwards/forwards"
    backgroundColor="进度条的背景颜色"
    border-radius="进度条的边框圆角大小rpx"
    show-info="显示进度条右侧进度百分比"
    font-size="进度百分比的字体大小rpx"
    bindactiveend="动画完成时触发事件"
></progress>
  1. 按钮】button

<button type=”按钮样式 primary/default/warn” size=”按钮大小 default/mini” disabled=”禁用按钮” open-type=”开放能力 打开授权、分享、联系客服” bindtap=”on点击事件” hover-class=”按钮按下时样式类” > </button>

  1. 复选框】checkbox

<checkbox checked=”true初始选中状态” value=”任意类型的值” disabled=”禁用” color=”选中状态的颜色” bindchange=”on状态改变事件” ></checkbox>

  1. 输入框】input

<input bindconfirm=”on绑定输入框输入事件” maxlength=”123最大输入长度” bindblur=”on输入框失去焦点事件” bindconfirm=”on输入完成事件” />

  1. 开关】switch

<switch checked=”true开关状态” type=”样式类型switch/checkbox” color=”开关颜色” disabled=”禁用开关” bindchange=”on状态改变事件” ></switch>

  1. 单选框】radio

<radio value=”任意类型的值” checked=”true选择状态” color=”选择颜色” disabled=”禁用开关” bindchange=”on状态改变事件” >Radio</radio>

  1. 多行文本】textarea

<Textarea value=”内容” placeholder=”占位符文本” disabled=”禁用文本” maxlength=”最大输入长度” auto-height=”内容自动调整高度” bindinput=”on绑定输入事件” bindblur=”on失去焦点事件” bindconfirm=”on完成输入事件” ></Textarea>

  1. 表单标签】label

<Label for=”input-id”>表单标签</Label>

  1. 选择器】picker

<Picker mode=”模式selector/time/date/multiSelector” range=”列表数组” range-key=”选择器显示range数组字段” value=”初始值” start=”开始” end=”结束” bindchange=”on选择器值改变事件” disabled=”禁用” ></Picker>

  1. picker-view】滚动选择器视图

<picker-view value=”数组,初始选择的值” indicator-style=”选择器指示器的样式” indicator-class=”选择器指示器自定义类名” mask-style=”蒙层样式,弹出时背景效果” bindchange=”on绑定选择器值改变事件” animation=”控制显示和隐藏的动画效果” bindpickstart=”on开始滚动事件” bindpickend=”on结束滚动事件” ></picker-view>

  1. 滑动选择器】slider

<slider value=”123初始值” min=”123最小值” max=”123最大值” step=”123滑块步进值,拖动滑块时的增量” disabled=”禁用滑块” activeColor=”已选择部分的颜色” block-size=”123按钮大小” block-color=”按钮颜色” show-value=”true显示滑块当前值” bindchange=”滑块值改变事件” ></slider>

  1. 表单】form

用于包裹表单元素,监听form事件

<form report-submit=”true” bindsubmit=”绑定表单提交事件” bindreset=”绑定表单重置事件” bindbeforeunload=”绑定表单在被卸载前触发的事件” report-submit=”true” report-submit-timeout=”123设置formId 的上报超时时间” bindunsubmit=”绑定表单提交被阻止事件” bindreset=”绑定表单重置事件” ></form>

  1. 音频播放器】audio

<audio src=”http音频URL” controls=”true显示音频播放控件” loop=”true循环播放” autoplay=”true自动播放” poster=”http封面图” name=”音频名称,显示在播放器上” author=”音频作者信息” bindplay=”on音频播放” bindpause=”on暂停事件” ></audio>

  1. 图片】image

<image src=”http图片的URL” mode=”图片的显示模式 scaleToFill、aspectFit、aspectFill、widthFix、top、bottom、center、left、right、top left、top right、bottom left、bottom right” lazy-load=”true图片是否懒加载” default-src=”http加载失败时显示的默认图片URL” bindload=”on图片加载成功事件” binderror=”on加载失败事件” bindtap=”on绑定图片点击事件” width=”宽度” height=”高度” ></image>

  1. 视频播放器】video

<video src=”http视频URL” controls=”true显示视频播放控件” loop=”true循环播放” autoplay=”true自动播放” poster=”http封面图” initial-time=”123初始播放位置(秒)” bindended=”播放结束事件” author=”音频作者信息” bindplay=”on播放事件” bindpause=”on暂停事件” ></video>

  1. 显示地图】map
  2. 绘图画布】canvas
  3. 模板】template
  4. 广告】ad
  5. 自定义组件】custom-component
  6. 弹出层组件

<PageContainer show={显示组件} overlay={遮挡层} round={弧形} onClickOverlay={() => tap(‘点击遮挡’))}> <View> </View > </PageContainer >

API属性

  1. 去掉导航
./index.config.ts
export default definePageConfig({
  navigationStyle: 'custom' //去掉导航
})
  1. 下拉刷新
./index.config.ts
export default definePageConfig({
  enablePullDownRefresh: true,//开启下拉刷新
  "backgroundTextStyle": "dark" //顶部三个点闪烁的动画就不会显示
})

//页面设置函数触发下拉刷新
usePullDownRefresh(() => {
    //下拉刷新时的回调
    Taro.startPullDownRefresh()//触发下拉刷新动画
    Taro.stopPullDownRefresh()//停止当前页面下拉刷新。
})
  1. 触底事件刷新
export default definePageConfig({
  onReachBottomDistance: 50,//刷新触底事件
})
//页面设置函数 刷新触底事件
useReachBottom(() => {
    ///
})
  1. 设置页面名
./index.config.ts
export default definePageConfig({
  navigationBarTitleText: '首页',
})
  1. 导入子组件
./index.config.ts
export default definePageConfig({
  usingComponents: {
    "Head": "../../components/head/index"
  }
})
  1. 获取小程序胶囊
Taro.getMenuButtonBoundingClientRect()
// 返回数据
let rect= {
    top: 26,
    bottom: 58,
    left: 278,
    right: 365,
    width: 87,
    height: 32
  }
  1. 浏览图片
Taro.previewImage({
      current: url, // 当前显示图片的http链接
      urls: listData[index].image // 需要预览的图片http链接列表
})
  1. 网络请求
Taro.request({
            url: '/getQuickLogin',
            data: {
              blok: 'weixin',
              code: '1234'
            },
            method:'GET',//POST
            header: {
              'content-type': 'application/json'
            },
            success: function (res) {
              console.log(res.data)
            }
          })
        } else {
          console.log('登录失败!' + res.errMsg)
        }
  1. 接收路由跳转传参
//生命周期useLoad 接收
useLoad((res: any) => {
    console.log('Page publish.', res)
})
  1. 缓存

Taro.setStorageSync(‘key’, ‘value’)
let str =Taro.getStorageSync(‘key’)

  1. 开启转发功能
//开启转发
    Taro.showShareMenu({
      withShareTicket: true,
      showShareItems: ['shareAppMessage', 'shareTimeline'],
    })
    
    //QQ开启转发
    Taro.showShareMenu({
      showShareItems: ['qq', 'qzone', 'wechatFriends', 'wechatMoment'],
    })
//必须
useShareAppMessage(() => {
    return {
      title: "生活墙-谈吐-全国高校论坛",
      path: "/pages/talk/index",
      imageUrl:''
    };
})
  1. 禁止穿透滚动

<view :catch-move=”true”>vue</view>
<View catchMove={false}>React</View>

  1. 判断机型/平台
 let isIOS : string = Taro.getSystemInfoSync().platform;//判断机型 devtools/ios/iPhone
 let isWX : string = process.env.TARO_ENV; //判断平台

生命周期

import Taro, { useLoad,useLaunch ,useUnload ,useDidShow,useDidHide} from '@tarojs/taro'
useLoad 页面加载完成时的回调。
useLaunch 小程序初始化完成时的回调。
useUnload 页面卸载时的回调。
useDidShow 页面展示时的回调。
useDidHide 页面隐藏时的回调。
153 Views
分享你的喜爱
linwute
linwute

我要像梦一样自由,像大地一样宽容;
在艰辛放逐的路上,点亮生命的光芒;
我要像梦一样自由,像天空一样坚强;
在曲折蜿蜒的路上,体验生命的意义;

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注