taro 横向滚动

import Taro, { Component } from '@tarojs/taro';
import { View,ScrollViewProps } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import './index.scss';
import EmptyBlock from '@/components/EmptyBlock';

@connect(({feedback}) => ({
...feedback,
}))
class Feedback extends Component {
config = {
navigationBarTitleText: '意见反馈',
};

componentDidShow = () => {
this.props.dispatch({ type:'feedback/save',payload:{ask_list :[]}})
this.props.dispatch({
type: 'feedback/init',
});
};
toAdd = ()=>{
Taro.navigateTo({
url:'/pages/feedback/add/index'
})
}
render() {

const scrollStyle = {
  height: '150px',
  width:'1500px',
  'white-space': 'nowrap'
}
const scrollTop = 0
const Threshold = 20
const vStyleA = {
  display: 'inline-block',
  height: '150px',
  width:'500px',
  background: 'rgb(26, 173, 25)'
}
const vStyleB = {
  display: 'inline-block',
         height: '150px',
    width:'500px',
  background: 'rgb(39,130,215)'
}
const vStyleC = {
  display: 'inline-block',
  height: '150px',
  width:'500px',
  background: 'rgb(241,241,241)',
  color: '#333'
}
return (
  <ScrollView
    className='scrollview'
    scrollX
    scrollWithAnimation
    scrollTop={scrollTop}
    style={scrollStyle}
    lowerThreshold={Threshold}
    upperThreshold={Threshold}
    onScrollToUpper={this.onScrollToUpper.bind(this)} // 使用箭头函数的时候 可以这样写 `onScrollToUpper={this.onScrollToUpper}`
    onScroll={this.onScroll}
  >
    <View style={vStyleA}>A</View>
    <View style={vStyleB}>B</View>
    <View style={vStyleC}>C</View>
  </ScrollView>
)

}
}

posted @   盘思动  阅读(1594)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
历史上的今天:
2017-09-14 isNaN与parseInt/parseFloat
2017-09-14 git查看/修改 用户名和邮箱
点击右上角即可分享
微信分享提示