taro swiper & scroll tabs
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的更多相关文章
- taro scroll tabs 滚动标签 切换
taro scroll tabs 滚动标签 切换 https://www.cnblogs.com/lml-lml/p/10954069.html https://developers.weixin.q ...
- scroll tabs
scroll tabs https://github.com/NervJS/taro-ui/blob/dev/src/components/tabs/index.tsx https://github. ...
- Taro -- Swiper的图片由小变大3d轮播效果
Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...
- swiper tabs综合示例
html部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <m ...
- swiper快速切换插件(两个综合案例源码)
swiper快速切换插件 swiper.js自己去官网下载哈.先来一个tab切换案例: demo.html <!doctype html> <html> <head> ...
- 移动端滑动效果 swiper 4.0.7
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" ...
- 优雅的swiper实例
swiper实例 <!DOCTYPE html> <html lang="en"> <head> <meta name="vie ...
- TabbedPaneDemo
package swing.tabbedpane; import java.awt.BorderLayout; import java.awt.event.ActionEvent; import ja ...
- Swing-选项卡面板JTabbedPane-入门
注:非原创,内容源自<Swing 的选项卡面板>,笔者做了少量修改. 选项卡面板是一个很常用的Swing组件,在window下,右击我的电脑,查看属性,就是一个典型的选修卡面板.当然还有最 ...
随机推荐
- 洛谷P4317
Description 定义 \(sum(i)\) 表示 \(i\) 的二级制中 1 的个数 给定一个 N,求 \(\prod_{i=1}^N sum(i)\) Solution 显然是数位 DP 考 ...
- hashCode、equals详解
hash和hash表是什么? hash是一个函数,该函数中的实现就是一种算法,就是通过一系列的算法来得到一个hash值,这个时候,我们就需要知道另一个东西,hash表,通过hash算法得到的hash值 ...
- SpringCloud及其组件详解
SpringCloud及其组件详解 1.Spring Cloud 1.1 Spring Cloud和Dubbo的区别图解 1.2 微服务的技术栈 2.Spring Cloud 概述 2.1 Sprin ...
- 删除Kafka中的topic
删除Kafka中的topic 一.配置delete.topic.enable=true 二.其他方法 一.配置delete.topic.enable=true 修改kafaka配置文件server.p ...
- mapreduce编程练习(二)倒排索引 Combiner的使用以及练习
问题一:请使用利用Combiner的方式:根据图示内容编写maprdeuce程序 示例程序 package com.greate.learn; import java.io.IOException; ...
- Pythonchallenge1过关攻略
第一关上来是一个电视,上面写着2^38,这就非常关键了,这时候我们已经有了大致思路,再看一眼电视机下面的话确认一下,"Hint: try to change the URL address. ...
- JDK-7新特性,更优雅的关闭流-java try-with-resource语句使用
前言 公司最近代码质量整改,需要对大方法进行调整,降低到50行以下,对方法的深度进行降低,然后有些文件涉及到流操作,很多try/catch/finally语句,导致行数超出规范值,使用这个语法可以很好 ...
- cassandra权威指南读书笔记--引言概要
数据库事务正确执行的四个基本要素事务要有四个基本要素:ACID:原子性(Atomic).一致性(Consistent).隔离性(Isolated).持久性(Durable)原子性(Atomic):整个 ...
- linux(2)系统目录结构
前言 平常linux系统用的也不少,那么linux下的每个目录都是用来干什么的,小伙伴们有仔细研究过吗?让我们来了解下吧 Linux 系统目录结构 登录系统后,在当前命令窗口下输入命令: [root@ ...
- Codeforces Round #656 (Div. 3) D. a-Good String
题目链接:https://codeforces.com/contest/1385/problem/D 题意 一个小写字母串称为 $c-good\ string$,如果至少满足以下条件之一: 字符串长度 ...