Taro踩坑记录一: swiper组件pagestate定制,swiperChange中setState导致组件不能滚动。
import Taro, { Component } from '@tarojs/taro';
import { Swiper, SwiperItem, Image, View } from '@tarojs/components';
import PropTypes from 'prop-types';
import './MySlider.scss';
export default class MySlider extends Component {
static propTypes = {
banner: PropTypes.array,
};
static defaultProps = {
banner: [],
};
state = {
current: 0
}
swiperChange = (e) => {
this.setState({
current: e.detail.current
})
}
render() {
const { banner } = this.props;
const { current } = this.state;
return (
<View className='wrapper'>
<Swiper
className='swiper-container'
circular
autoplay
onChange={ this.swiperChange }
current={ current }
>
{ banner.map((item, index) => (
<SwiperItem key={index}>
<Image className='swiper-img' mode='widthFix' src={item.src}></Image>
</SwiperItem>
))}
</Swiper>
<View className='pageState'>{current + 1}/{ banner.length }</View>
</View>
)
}
}
需要同时在组件上绑定current属性。
Taro踩坑记录一: swiper组件pagestate定制,swiperChange中setState导致组件不能滚动。的更多相关文章
- [技术博客]iview组件样式踩坑记录
[技术博客]iview组件样式踩坑记录 iview官方文档. 在本次项目开发中,前端项目主要使用vue框架+iview组件构建,其中iview组件在使用过程中遇到了许多官方文档中没有明确说明或是很难注 ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- VUE使用微信JDK(附踩坑记录)
VUE使用微信分享SDK(附踩坑记录) 微信分享官方文档 安装JS-SDK npm i -S weixin-jsapi 引入包 ES5 写法 const wx = require('weixin-js ...
- manjaro xfce 18.0 踩坑记录
manjaro xfce 18.0 踩坑记录 1 简介1.1 Manjaro Linux1.2 开发桌面环境2 自动打开 NumLock3 系统快照3.1 安装timeshift3.2 使用times ...
- Spark Ignite踩坑记录
Ignite spark 踩坑记录 简述 ignite访问数据有两种模式: Thin Jdbc模式: Jdbc 模式和Ignite client模式: shell客户端输出问题,不能输出全列: 针对上 ...
- unionId突然不能获取的踩坑记录
昨天(2016-2-2日),突然发现系统的一个微信接口使用不了了.后来经查发现,是在网页授权获取用户基本信息的时候,unionid获取失败导致的. 在网页授权获取用户基本信息的介绍中(http://m ...
- CentOS7.4安装MySQL踩坑记录
CentOS7.4安装MySQL踩坑记录 time: 2018.3.19 CentOS7.4安装MySQL时网上的文档虽然多但是不靠谱的也多, 可能因为版本与时间的问题, 所以记录下自己踩坑的过程, ...
- ubuntu 下安装docker 踩坑记录
ubuntu 下安装docker 踩坑记录 # Setp : 移除旧版本Docker sudo apt-get remove docker docker-engine docker.io # Step ...
- SpringBoot + Shiro + shiro.ini 的踩坑记录
0.写在前面的话 好久没写博客了,诶,好多时候偷懒直接就抓网上的资料丢笔记里了,也就没有自己提炼,偷懒偷懒.然后最近参加了一个网络课程,要交作业的那种,为了能方便看下其他同学的作业,就写了个爬虫把作业 ...
随机推荐
- IPv6 三个访问本地地址的小Tips
最近发现家里宽带支持IPv6了,这里分享三个利用IPv6访问本地地址(内网地址)的方法. 通常来说,我们用localhost来代表本地地址127.0.0.1.其实在IPv6中有他自己的表示方法ip6- ...
- table 单列宽度设置
参考:https://blog.csdn.net/lunhui1994_/article/details/81120579 效果: html: <!DOCTYPE html> <ht ...
- iOS开发系列-应用程序之间跳转
概述 常见的涉及到应用程序之间的跳转场景,比如社交分享.支付宝.微信支付.链接跳转到应用. 在iOS中应用跳转的本质:打开一个应用只需要拿到对应应用的URL即可. 统一资源定位符 URL(统一资源定位 ...
- JDBC操作之连接和关闭mysql数据库
首先导入jdbc所用的jar包 然后分别调用getCon()和closeCon方法 import java.sql.DriverManager; import java.sql.SQLExceptio ...
- ASP.NET网站要手机自适应页面
本文转载的地址:http://mobile.51cto.com/ahot-409516.htm 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首 ...
- log-slave-updates参数
从库做为其他从库的主库时 log-slave-updates参数是必须要添加的,因为从库要作为其他从库的主库,必须添加该参数.该参数就是为了让从库从主库复制数据时可以写入到binlog日志,为什么要用 ...
- python中logging使用方法
1.logging提供了一组便利的函数,用来做简单的日志.它们是 debug(). info(). warning(). error() 和 critical(). 1.1logging以严重程度递增 ...
- 自动化测试之sikuli调研
调研结果 Sikuli可用于web和app的自动化测试中,操作简单,代码容易,但截图过程太过繁琐,所需要的图片内存占用量大,且sikuli的图片识别度较低,需对所要操作的图片进行精准截图. 什么是Si ...
- CF774L Bars
题意:给你一个二进制表示是否可以吃巧克力.一共有k个巧克力,第一天和最后一天必须吃.最小化每两次吃巧克力的最大间隔? 标程: #include<bits/stdc++.h> using n ...
- 树莓派3B+ 人脸识别、摄像头安装和使用
最近在学校里折腾树莓派上的人脸识别,折腾了很久才能用 在此记录下使用的过程和遇到的困难 过程基于超有趣!手把手教你使用树莓派实现实时人脸检测完成的.其中前面opencv的安装是文章中的Raspbian ...