Taro小程序·常用组件与API

组件

视图】view

<view class="" 
    id="标识符" 
    hidden="true隐藏" 
    data-custom="自定义数据属性" 
    hover-class="被点击时样式类" 
    hover-stop-propagation="阻止冒泡到父元素" 
    hover-start-time="123长按触发点击事件时间" 
    hover-stay-time="123点击后保持高亮时间" 
    animation="{{动画效果}}
">
  这是一个视图容器Ï
</view>

滚动区域】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>

轮播图】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>

文本】text

1.<text 
    selectable="true可选中文本"
    space="true保留空格和换行"
    decode="true特殊字符解码"
    size="12字体大小"
    color="字体颜色"
    bold="加粗字体"
    line-clamp="12显示行数"
    bindtap="on点击文本"
></text>

图标】icon

进度条】progress

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

按钮】button

复选框】checkbox

输入框】input

开关】switch

单选框】radio

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

多行文本】textarea

表单标签】label

选择器】picker

picker-view】滚动选择器视图

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

滑动选择器】slider

表单】form

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

音频播放器】audio

图片】image

视频播放器】video

显示地图】map
绘图画布】canvas
模板】template
广告】ad
自定义组件】custom-component
弹出层组件

API属性

去掉导航

./index.config.ts
export default definePageConfig({
  navigationStyle: 'custom' //去掉导航
})

下拉刷新

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

//页面设置函数触发下拉刷新
usePullDownRefresh(() => {
    //下拉刷新时的回调
    Taro.startPullDownRefresh()//触发下拉刷新动画
    Taro.stopPullDownRefresh()//停止当前页面下拉刷新。
})

触底事件刷新

export default definePageConfig({
  onReachBottomDistance: 50,//刷新触底事件
})
//页面设置函数 刷新触底事件
useReachBottom(() => {
    ///
})

设置页面名

./index.config.ts
export default definePageConfig({
  navigationBarTitleText: '首页',
})

导入子组件

./index.config.ts
export default definePageConfig({
  usingComponents: {
    "Head": "../../components/head/index"
  }
})

获取小程序胶囊

Taro.getMenuButtonBoundingClientRect()
// 返回数据
let rect= {
    top: 26,
    bottom: 58,
    left: 278,
    right: 365,
    width: 87,
    height: 32
  }

浏览图片

Taro.previewImage({
      current: url, // 当前显示图片的http链接
      urls: listData[index].image // 需要预览的图片http链接列表
})

网络请求

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)
        }

接收路由跳转传参

//生命周期useLoad 接收
useLoad((res: any) => {
    console.log('Page publish.', res)
})

缓存

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

开启转发功能

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

禁止穿透滚动

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

判断机型/平台

 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 页面隐藏时的回调。

475 Views

Taro小程序·常用组件与API

linwute

留下评论