Taro 物料市场

taro component demo

css in js

flex & Taro.pxTransform & boxSizing: 'border-box',

import Taro from '@tarojs/taro';

export default {

  hmInformationCard: {

    display: 'flex',

    alignItems: 'center',

    flexDirection: 'row',

    justifyContent: 'center',

    width: Taro.pxTransform(750),

    height: Taro.pxTransform(596)

  },

  box: {

    display: 'flex',

    alignItems: 'flex-start',

    flexDirection: 'column',

    justifyContent: 'center',

    borderRadius: Taro.pxTransform(39),

    boxShadow: '0px 10px 30px rgba(209, 213, 223, 0.50)',

    backgroundColor: '#ffffff',

    width: Taro.pxTransform(721),

    height: Taro.pxTransform(518)

  },

  hd: {

    boxSizing: 'border-box',

    display: 'flex',

    alignItems: 'center',

    flexDirection: 'row',

    justifyContent: 'space-between',

    paddingRight: Taro.pxTransform(62),

    paddingLeft: Taro.pxTransform(58),

    width: Taro.pxTransform(721),

    height: Taro.pxTransform(80)

  },

  container: { display: 'flex', flexDirection: 'row' },

  tagWrap: {

    boxSizing: 'border-box',

    display: 'flex',

    alignItems: 'center',

    flexDirection: 'row',

    borderRadius: Taro.pxTransform(39),

    backgroundColor: '#fec4b0',

    paddingRight: Taro.pxTransform(18),

    paddingLeft: Taro.pxTransform(16),

    height: Taro.pxTransform(80)

  },

  tag: {

    opacity: 1,

    textAlign: 'center',

    lineHeight: Taro.pxTransform(35),

    whiteSpace: 'nowrap',

    color: '#f64000',

    fontSize: Taro.pxTransform(23),

    fontWeight: 400

  },

  nameClass: {

    display: 'flex',

    alignItems: 'flex-start',

    flexDirection: 'column',

    marginLeft: Taro.pxTransform(29),

    height: Taro.pxTransform(80)

  },

  wrap: { display: 'flex', flexDirection: 'row', marginTop: Taro.pxTransform(2) },

  alexander: {

    opacity: 1,

    width: Taro.pxTransform(109),

    height: Taro.pxTransform(41),

    lineHeight: Taro.pxTransform(41),

    whiteSpace: 'nowrap',

    color: '#141821',

    fontSize: Taro.pxTransform(27),

    fontWeight: 400

  },

  dataClass: { display: 'flex', flexDirection: 'row' },

  data: {

    opacity: 1,

    width: Taro.pxTransform(187),

    height: Taro.pxTransform(35),

    lineHeight: Taro.pxTransform(35),

    whiteSpace: 'nowrap',

    color: '#858997',

    fontSize: Taro.pxTransform(23),

    fontWeight: 400

  },

  titleImg: { width: Taro.pxTransform(35), height: Taro.pxTransform(8) },

  summaryClass: {

    display: 'flex',

    position: 'relative',

    flexDirection: 'row',

    justifyContent: 'center',

    marginTop: Taro.pxTransform(49),

    width: Taro.pxTransform(719),

    height: Taro.pxTransform(94)

  },

  summary: {

    position: 'relative',

    opacity: 1,

    width: Taro.pxTransform(592),

    height: Taro.pxTransform(94),

    overflow: 'hidden',

    textOverflow: 'ellipsis',

    lineHeight: Taro.pxTransform(47),

    color: '#141821',

    fontSize: Taro.pxTransform(31),

    fontWeight: 400

  },

  word: {

    position: 'absolute',

    top: Taro.pxTransform(47),

    left: Taro.pxTransform(526),

    opacity: 1,

    lineHeight: Taro.pxTransform(47),

    whiteSpace: 'nowrap',

    color: '#141821',

    fontFamily: 'Helvetica',

    fontSize: Taro.pxTransform(31),

    fontWeight: 'normal'

  },

  ft: {

    display: 'flex',

    alignItems: 'center',

    flexDirection: 'row',

    marginTop: Taro.pxTransform(132),

    height: Taro.pxTransform(47)

  },

  shoucang: { marginLeft: Taro.pxTransform(64), width: Taro.pxTransform(35), height: Taro.pxTransform(29) },

  num: {

    opacity: 1,

    marginLeft: Taro.pxTransform(16),

    width: Taro.pxTransform(53),

    height: Taro.pxTransform(47),

    lineHeight: Taro.pxTransform(47),

    whiteSpace: 'nowrap',

    color: '#141821',

    fontFamily: 'Helvetica',

    fontSize: Taro.pxTransform(31),

    fontWeight: 'normal'

  },

  like: {

    opacity: 1,

    width: Taro.pxTransform(62),

    height: Taro.pxTransform(47),

    lineHeight: Taro.pxTransform(47),

    whiteSpace: 'nowrap',

    color: '#141821',

    fontSize: Taro.pxTransform(31),

    fontWeight: 400

  }

};

网易严选

https://github.com/qit-team/taro-yanxuan/blob/master/config/index.js

https://github.com/qit-team/taro-yanxuan/blob/master/src/components/popup/index.js

https://github.com/qit-team/taro-yanxuan/blob/master/src/components/popup/index.scss

this.props.children

ScrollView & style height



import Taro, { Component } from '@tarojs/taro'

import { View, ScrollView, Image } from '@tarojs/components'

import classNames from 'classnames'

import closeIcon from './assets/close.png'

import './index.scss'

export default class Popup extends Component {

  static defaultProps = {

    visible: false,

    compStyle: '',

    onClose: () => {}

  }

  constructor (props) {

    super(props)

    this.state = {

      isShow: props.visible

    }

  }

  componentWillReceiveProps (nextProps) {

    const { visible } = nextProps

    const { isShow } = this.state

    if (visible !== isShow) {

      this.setState({

        isShow: visible

      })

    }

  }

  handleClose = () => {

    this.props.onClose()

  }

  handleTouchMove = e => {

    e.stopPropagation()

  }

  render () {

    const { onClose, compStyle } = this.props

    const { isShow } = this.state

    return (

      <View

        className={classNames('comp-popup', isShow && 'comp-popup--visible')}

        onTouchMove={this.handleTouchMove}

        style={compStyle}

      >

        <View className='comp-popup__mask' onClick={onClose} />

        <View className='comp-popup__wrapper'>

          <ScrollView

            scrollY

            className='comp-popup__content'

            style={{ height: Taro.pxTransform(750) }}

          >

            {this.props.children}

          </ScrollView>

          <View className='comp-popup__close' onClick={onClose}>

            <Image className='comp-popup__close-img' src={closeIcon} />

          </View>

        </View>

      </View>

    )

  }

}

scss & flex

@import '@styles/theme.scss';

.comp-popup {

  position: absolute;

  width: 100%;

  height: 0;

  top: 0;

  left: 0;

  z-index: 9;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  // NOTE RN 没有 display: none，暂时用 height 实现同等效果

  &--visible {

    height: 100%;

  }

}

.comp-popup__mask {

  flex: 1;

  width: 100%;

  background: rgba(0, 0, 0, 0.25);

}

.comp-popup__wrapper {

  position: absolute;

  bottom: 0;

  width: 100%;

  background: #ffffff;

}

.comp-popup__content {

}

.comp-popup__close {

  position: absolute;

  top: 22px;

  right: 22px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  width: 48px;

  height: 48px;

  &-img {

    width: 24px;

    height: 24px;

  }

}

Taro.pxTransform

css in js

https://nervjs.github.io/taro/docs/size.html#api

巴特西

Taro 物料市场

Taro 物料市场

css in js

网易严选

this.props.children

scss & flex

Taro.pxTransform

最新文章

热门文章