Taro 杂项

小红点

&::before {
                content: "";
                display: block;
                width: 12px;
                height: 12px;
                background: red;
                border-radius: 50%;
                margin-right: 8px;
              }

打钩/箭头

 &::after {
            content: "";
            width: 10px;
            height: 40px;
            position: absolute;
            right: 0;
            top: -40px;
            border: 18px solid red;
            border-top-color: transparent;
            border-left-color: transparent;
            transform: rotate(45deg);
          }

三角箭头

 .item-arrow {
            margin-left: 20px;
            width: 0;
            height: 0;
            margin-top: 10px;
            border-width: 10px; /*控制箭头的大小 */
            border-style: solid;
            border-color: #333 transparent transparent transparent;
          }

classname包含多个

//固定
className = 'abc  ddd'

//动态
className = {`abc  ${index==0 ? 'ddd' : 'aaa'}`}
vue中使用 :class=['abc',index==0?'ddd':'aaa']

动态设置style

<View className="repeal-action-wrap" style={{ paddingBottom: totalCount > 0 ? '10px' : '0' }}>

防重复点击

  /**
* 防止重复点击
* @param {参数} fn 
*/
  preventActive = (fn, time) => {
    time = time || 500;
    // const self = this
    if (getGlobalData('pageActive')) {
      setGlobalData('pageActive', false)
      // this.globalData.pageActive = false
      if (fn) fn()
      setTimeout(() => {
        // self.globalData.pageActive = true
        setGlobalData('pageActive', true)
      }, time);
    } else {
      console.log("重复点击")
    }
  }
//使用
Taro.getApp().$app.preventActive(() => {
  if(e.type == "markertap"){
    this.setState({ showDetail: true })
    /// 延时
  }else{
    this.setState({ showDetail: false })
  }
})

动态计算view的高度

  getPoiWrapHeight = () => {
    setTimeout(() => {
      let _this = this
      Taro.createSelectorQuery().select('#poi-wrap').boundingClientRect(function (rect) {
        _this.setState({
          poiWrapHeight: rect.height
        });
      }).exec()
    }, 300)
  }

///地图显示区域高度 = 屏幕的总高度 - 导航栏高度 - poiWrap高度
let mapHeight = screenHeight - poiWrapHeight - naviTotal;

<View className='map-wrap' style={{height:`${mapHeight}px`}}>
  <Map
    id="mapid"
    className="map"
    latitude={latitude || 0}
    longitude={longitude}
    showLocation={true}
    markers={markers}
  ></Map>
</View>
{/* poi内容 */}
<View className='poi-wrap' id='poi-wrap'>
  {
    pois.map((item, index) => {
      return (
        <View className={`poi-item ${item.checked ? 'active' : ''}`} key={index} onClick={() => this.onPoiItemClick(item, index)}>
          <View className='content'>
            <View className='name'>{item.name}</View>
            <View className='address'>{item.realaddress}</View>
          </View>
        </View>
      )
    })
  }
</View>