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 发布文章使用:只允许注册用户才可以访问!


taro swiper & scroll tabs的更多相关文章

  1. taro scroll tabs 滚动标签 切换

    taro scroll tabs 滚动标签 切换 https://www.cnblogs.com/lml-lml/p/10954069.html https://developers.weixin.q ...

  2. scroll tabs

    scroll tabs https://github.com/NervJS/taro-ui/blob/dev/src/components/tabs/index.tsx https://github. ...

  3. Taro -- Swiper的图片由小变大3d轮播效果

    Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...

  4. swiper tabs综合示例

    html部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...

  5. swiper快速切换插件(两个综合案例源码)

    swiper快速切换插件 swiper.js自己去官网下载哈.先来一个tab切换案例: demo.html <!doctype html> <html> <head> ...

  6. 移动端滑动效果 swiper 4.0.7

    <!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...

  7. 优雅的swiper实例

    swiper实例 <!DOCTYPE html> <html lang="en"> <head> <meta name="vie ...

  8. TabbedPaneDemo

    package swing.tabbedpane; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import ja ...

  9. Swing-选项卡面板JTabbedPane-入门

    注:非原创,内容源自<Swing 的选项卡面板>,笔者做了少量修改. 选项卡面板是一个很常用的Swing组件,在window下,右击我的电脑,查看属性,就是一个典型的选修卡面板.当然还有最 ...

随机推荐

  1. 洛谷P4317

    Description 定义 \(sum(i)\) 表示 \(i\) 的二级制中 1 的个数 给定一个 N,求 \(\prod_{i=1}^N sum(i)\) Solution 显然是数位 DP 考 ...

  2. hashCode、equals详解

    hash和hash表是什么? hash是一个函数,该函数中的实现就是一种算法,就是通过一系列的算法来得到一个hash值,这个时候,我们就需要知道另一个东西,hash表,通过hash算法得到的hash值 ...

  3. SpringCloud及其组件详解

    SpringCloud及其组件详解 1.Spring Cloud 1.1 Spring Cloud和Dubbo的区别图解 1.2 微服务的技术栈 2.Spring Cloud 概述 2.1 Sprin ...

  4. 删除Kafka中的topic

    删除Kafka中的topic 一.配置delete.topic.enable=true 二.其他方法 一.配置delete.topic.enable=true 修改kafaka配置文件server.p ...

  5. mapreduce编程练习(二)倒排索引 Combiner的使用以及练习

    问题一:请使用利用Combiner的方式:根据图示内容编写maprdeuce程序 示例程序 package com.greate.learn; import java.io.IOException; ...

  6. Pythonchallenge1过关攻略

    第一关上来是一个电视,上面写着2^38,这就非常关键了,这时候我们已经有了大致思路,再看一眼电视机下面的话确认一下,"Hint: try to change the URL address. ...

  7. JDK-7新特性,更优雅的关闭流-java try-with-resource语句使用

    前言 公司最近代码质量整改,需要对大方法进行调整,降低到50行以下,对方法的深度进行降低,然后有些文件涉及到流操作,很多try/catch/finally语句,导致行数超出规范值,使用这个语法可以很好 ...

  8. cassandra权威指南读书笔记--引言概要

    数据库事务正确执行的四个基本要素事务要有四个基本要素:ACID:原子性(Atomic).一致性(Consistent).隔离性(Isolated).持久性(Durable)原子性(Atomic):整个 ...

  9. linux(2)系统目录结构

    前言 平常linux系统用的也不少,那么linux下的每个目录都是用来干什么的,小伙伴们有仔细研究过吗?让我们来了解下吧 Linux 系统目录结构 登录系统后,在当前命令窗口下输入命令: [root@ ...

  10. Codeforces Round #656 (Div. 3) D. a-Good String

    题目链接:https://codeforces.com/contest/1385/problem/D 题意 一个小写字母串称为 $c-good\ string$,如果至少满足以下条件之一: 字符串长度 ...