taro3.x: 回到顶部ScrollView实现方式

摘要:
使用ScrollView、onScroll和ScrollTop属性设置Math Random()(0-1)实现importReact,{useState}from‘act'import{View,Input,ScrollView,Text}from“@tarojs/components”importclassnames from“classnames”importNavBar from“@co”

taro3.x: 回到顶部ScrollView实现方式第1张

使用ScrollView,onScroll,scrollTop属性设置Math.random()(0-1)之间实现

import React, { useState } from 'react'
import { View, Input, ScrollView, Text } from '@tarojs/components'
import classnames from 'classnames'

import NavBar from '@components/navbar'
import useNavData from '@hooks/useNavData'
import Photos from '@components/photos'
import './index.scss'

const Index = () => {
  const { appHeaderHeight, contentHeight } = useNavData()
  const [scroll, setScroll] = useState<any>({})
  const [currentNav, setCurrentNav] = useState<any>({
    id: '1',
    chineseName: '图集',
    englishName: 'Photo'
  })

  const navData = [
    {
      id: '1',
      chineseName: '图集',
      englishName: 'Photo'
    },
    {
      id: '2',
      chineseName: '视屏',
      englishName: 'Video'
    },
    {
      id: '3',
      chineseName: '策划',
      englishName: 'Planning'
    },
    {
      id: '4',
      chineseName: '媒体',
      englishName: 'Media'
    },
    {
      id: '5',
      chineseName: '设计',
      englishName: 'Design'
    }
  ]

  const handleScroll = (e: any) => {
    const top = e.detail.scrollTop
    if (top > 200) {
      setScroll({
        ...scroll,
        fixed: true,
        style: { top: appHeaderHeight }
      })
    }
    if (top <= 200 && scroll.fixed) {
      setScroll({
        ...scroll,
        fixed: false,
        style: {}
      })
    }
  }

  const toTop = () => {
    setScroll({
      top: Math.random(),
      fixed: false,
      style: {}
    })
  }

  const handleNavClick = (item: any) => {
    setCurrentNav(item)
  }

  return (
    <View className="index">
      <NavBar />
      <ScrollView
        scrollY
        style={{ maxHeight: contentHeight }}
        scrollWithAnimation
        scrollTop={scroll.top}
        onScroll={handleScroll}
      >
        <View className="header">
          <View className="logo">logo</View>
          <View className="title">图集视频案例</View>
        </View>
        <View className="search">
          <View className="search-content">
            <View className="iconfont icon-search"></View>
            <Input className="search-input" placeholder="搜索"></Input>
          </View>
        </View>
        <View className={classnames('indexnav', scroll.fixed && 'fixed')} style={scroll.style}>
          <ScrollView scrollX>
            {
              navData.map((item: any, index: number) => (
                <View
                  key={index}
                  onClick={() => handleNavClick(item)}
                  className={classnames('indexnav-item', currentNav.id === item.id && 'actived')}>
                  <View className="chinese-name">{item.chineseName}</View>
                  <View className="english-name">{item.englishName}</View>
                </View>
              ))
            }
          </ScrollView>
        </View>
        <View className="content">
          {currentNav.englishName === 'Photo' && <Photos />}
        </View>
      </ScrollView>
      <View className="action">
        {
          scroll.fixed &&
          <View className="action-item" onClick={toTop}>
            <View className="item-icon">
              <View>TOP</View>
            </View>
          </View>
        }
        <View className="action-item">
          <View className="item-icon">
            <View className="iconfont icon-telephone-out"></View>
          </View>
          <View className="item-text">
            <Text>联系我们</Text>
          </View>
        </View>
      </View>
    </View>
  )
}
export default Index
const toTop = () => {
    setScroll({
      top: Math.random(),
      fixed: false,
      style: {}
    })
  }
.index {
    .header {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 20px 0 40px 0;

        .title {
            font-size: $font-40;
            font-weight: bold;
            color: $title-color;
        }
    }
    .search {
        display: flex;
        align-items: center;
        justify-content: center;
        &-content {
            display: flex;
            width: 90%;
            height: 70px;
            line-height: 70px;
            background-color: $bg-color;
            border-radius: $border-radius-base;
            .iconfont {
                padding: 0 20px;
            }
            .search-input {
                flex: 1;
                height: 70px;
                line-height: 70px;
            }
        }
    }
    .indexnav {
        width: 100%;
        white-space: nowrap;
        font-size: 0;
        transition: 0.2s;
        &-item {
            min-width: 86px;
            display: inline-block;
            font-size: $font-32;
            text-align: center;
            margin: 32px;

            .english-name {
                font-size: $font-26;
            }
            &.actived {
                color: $search-actived;
                border-bottom: 1px solid $search-actived;
            }
        }
    }
}

.action {
    position: fixed;
    right: 40px;
    bottom: 60px;
    transition: 0.3s;
    &-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        .item-icon {
            width: 100px;
            height: 100px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 50%;
            background-color: $white;
            box-shadow: 0 0 4px rgba($text-color, 0.3);
            color: $title-color;
            .iconfont {
                font-size: 50px;
            }
        }
        .item-text {
            font-weight: bold;
            font-size: $font-basic;
            margin-top: 10px;
            color: $white;
        }
    }
}

免责声明:文章转载自《taro3.x: 回到顶部ScrollView实现方式》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇简学LINGO(三)——实例篇如何修改Linux系统的 /etc/ssh/sshd_config 文件 "/etc/ssh/sshd_config" E212: Can't open file for writin下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

C++17结构化绑定

动机 std::map<K, V>的insert方法返回std::pair<iterator, bool>,两个元素分别是指向所插入键值对的迭代器与指示是否新插入元素的布尔值,而std::map<K, V>::iterator解引用又得到键值对std::pair<const K, V>。在一个涉及std::m...

html使用代码大全

<DIV style="FONT-SIZE: 9pt">1)贴图:<img src="http://t.zoukankan.com/图片地址">1)首行缩进2格:<p style="TEXT-INDENT: 2em">html使用代码大全</p> 2)加入连接:<a href="http://t.zou...

QCefView实现与JS的交互

Cef主动向JS通信主要有一种方法:首先在Cef中 QCefEvent event ( const QString& eventName ); //定义一个CEF事件 event.setStringProperty ( const QString& key, const QString& msg ); //为事件添加参数 board...

解决WebView跟ScrollView冲突

之前做项目遇到过ListView跟ScrollView的冲突问题,但是现在遇到的是WebView跟ScrollView的的冲突问题。在ScrollView里嵌套WebView滑动事件会失去焦点。 解决方案: sv01 =(ScrollView) findViewById(R.id.popup_sf_event_scroll_01);...

JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--实现

先学习下new操作符吧 new关键字调用函数的心路历程: 1.创建一个新对象 2.将函数的作用域赋给新对象(this就指向这个对象) 3.执行函数中的代码 4.返回这个对象 根据这个的思路,来实现一个简单的new操作吧,代码演示: 1 function myNew(Func, ...args) { 2 if (typeof Func !== 'fu...

iOS中循环引用的解除

一:为什么造成了循环引用?????????????????????????? 首先 对于网络工具类 finishedBlock里面 的一个属性是 copy的 那么 NetworkTools 会对网络工具 finishedBlock进行一个强引用 左边的控制器viewController里面 viewController 对 NetworkTools对象...