taro swiper & scroll tabs

https://taro-docs.jd.com/taro/docs/components/viewContainer/swiper.html

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

---

Swiper 滑动视图容器

https://taro-ui.jd.com/#/docs/swiper

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

// 引入 Swiper, SwiperItem 组件

import { Swiper, SwiperItem } from '@tarojs/components'

class App extends Component {

  render () {

    return (

      <Swiper

        className='test-h'

        indicatorColor='#999'

        indicatorActiveColor='#333'

        vertical

        circular

        indicatorDots

        autoplay>

        <SwiperItem>

          <View className='demo-text-1'>1</View>

        </SwiperItem>

        <SwiperItem>

          <View className='demo-text-2'>2</View>

        </SwiperItem>

        <SwiperItem>

          <View className='demo-text-3'>3</View>

        </SwiperItem>

      </Swiper>

    )

  }

}

tabs

https://taro-ui.jd.com/#/docs/tabs

import Taro from '@tarojs/taro'

import { View } from '@tarojs/components'

import { AtTabs, AtTabsPane } from 'taro-ui'

export default class Index extends Taro.Component {

  constructor () {

    super(...arguments)

    this.state = {

      current: 0,

    }

  }

  handleClick (value) {

    this.setState({

      current: value

    })

  }

  render () {

    const tabList = [{ title: '标签页1' }, { title: '标签页2' }, { title: '标签页3' }]

    return (

      <AtTabs current={this.state.current} tabList={tabList} onClick={this.handleClick.bind(this)}>

        <AtTabsPane current={this.state.current} index={0} >

          <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签页一的内容</View>

        </AtTabsPane>

        <AtTabsPane current={this.state.current} index={1}>

          <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>

        </AtTabsPane>

        <AtTabsPane current={this.state.current} index={2}>

          <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>

        </AtTabsPane>

      </AtTabs>

    )

  }

}

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---