美文网首页
react加载更多

react加载更多

作者: Wo信你个鬼 | 来源:发表于2019-10-18 10:15 被阅读0次
    import Taro, { Component } from '@tarojs/taro'
    import { ScrollView } from '@tarojs/components'
    import { Page, AtPage, AtPreview, AtPreviewItem, AtTitle, AtButton } from '@CUI'
    import cgi from '../../../config/cgi.js'
    import styles from './query_res.module.scss'
    const sdk = Taro.getApp().sdk
    
    export default class Index extends Page {
      config = {
        navigationBarTitleText: '查询结果'
      }
      state = {
        page: 1,
        formData: null,
        list: null,
      }
      componentWillMount() {
        console.log('手机端测试')
        if (this.$router.params) {
          this.setState({ formData: this.$router.params })
          let params = this.$router.params
          sdk.request({
            url: cgi.publicService,
            method: 'POST',
            data: {
              sessionId: "fujunyinid",
              serviceId: "gwyDevolution",
              taskId: params.taskId,
              pageNo: "1",
              department: params.department,
              searchContent: params.inputValue
            },
            header: { 'content-type': 'application/json' },
          }).then(res => {
          
            if (res.responseBody.list.length === 0) {
              Taro.showToast({
                title: '没有相关数据',
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                Taro.navigateBack(1)
              }, 3000)
            } else {
              this.setState({ list: res.responseBody.list })
            }
          })
        }
      }
    
      componentDidMount() { }
    
      componentWillUnmount() { }
    
      componentDidShow() { }
    
      componentDidHide() { }
    
      onScrollToLower(e) {
        if (this.state.loading) return
        this.setState({
          loading: true
        })
        Taro.showLoading({
          title: '加载中...',
          mask: true
        })
        this.setState({ page: this.state.page += 1 })
        sdk.request({
          url: cgi.publicService,
          method: 'POST',
          data: {
            sessionId: "fujunyinid",
            serviceId: "gwyDevolution",
            taskId: this.state.formData.taskId,
            pageNo: this.state.page,
            department: this.state.formData.department,
          },
          header: { 'content-type': 'application/json' },
        }).then(res => {
            
              let reslist = res.responseBody.list
             
              if (reslist && reslist.length > 0) {
                this.setState({
                  list: this.state.list.concat(reslist)
                })
                this.setState({
                  loading: false
                })
              } else {
                Taro.showToast({
                  title: '没有更多数据了...',
                  icon: 'none',
                  duration: 2000
                })
              }
              Taro.hideLoading()
            })
      }
      render() {
        const Threshold = 40
        return (
          <AtPage className={styles.test}>
            <ScrollView
              className={styles.ScollHight}
              scrollY
              lowerThreshold={Threshold}
              onScrollToLower={this.onScrollToLower.bind(this)}
              onScroll={this.onScroll}
            >
              <AtTitle>查询结果</AtTitle>
              {
                this.state.list && this.state.list.map((item) => {
                  return <AtPreview title='' actionText='' onActionClick={this.handleClick}>
                    <AtPreviewItem title='项目名称:' text={item.projectName} hasBorder />
                    <AtPreviewItem title='审批部门:' text={item.department} hasBorder />
                    {item.processingDecisions && <AtPreviewItem title='处理决定:' text={item.processingDecisions} />}
                  </AtPreview>
                })
              }
            </ScrollView>
          </AtPage>
        )
      }
    }
    

    相关文章

      网友评论

          本文标题:react加载更多

          本文链接:https://www.haomeiwen.com/subject/zqfimctx.html