城市选择scoll

最新推荐文章于 2020-10-29 13:53:57 发布

向飞飞

最新推荐文章于 2020-10-29 13:53:57 发布

阅读量186

点赞数

分类专栏：随笔记录

本文链接：https://blog.csdn.net/weixin_44943270/article/details/95501539

版权

随笔记录专栏收录该内容

11 篇文章 0 订阅

订阅专栏

滑动下拉,按住选择:

import React, { Component } from 'react'
import city from '../json/city.json'
import BScroll from 'better-scroll'


export default class SelectCity extends Component {
    render() {
        return (
            <div>
                {/* 右侧浮动条 */}
                <div onTouchMove={this.touchMove.bind(this)} style={{ position: 'fixed', width: '14px', backgroundColor: '#FFF', right: 0, top: '25%' }}>
                    {
                        city.citys.map(obj => <div className='s_city_cls' onClick={this.clickTitle.bind(this, obj.title)}>
                            {obj.title}
                        </div>)
                    }
                </div>

            {/* 左侧区域 */}
            <div id='city_box' style={{ position: 'fixed', width: '95%', height: '100%', overflow: 'auto' }}>
                <ul style={{ padding: 0 }} className='content'>
                    {/* 热门城市 */}
                    <div>
                        <h4>热门城市</h4>
                        <div style={{ display: 'flex', flexWrap: 'wrap' }}>
                            {
                                city.hotcity.map(obj => <div style={{ width: '25%' }}>{obj}</div>)
                            }
                        </div>
                    </div>

                    {/* 城市列表 */}
                    <div>
                        {
                            // {
                            //     "title":"A",
                            //     "lists":[
                            //         "阿坝","阿拉善","阿里","安康","安庆","鞍山","安顺","安阳","澳门"
                            //         ]
                            // }
                            city.citys.map(obj => <div id={obj.title}>
                                {/* 标题 */}
                                <h4>{obj.title}</h4>

                                {/* 子节点 */}
                                <div>
                                    {
                                        obj.lists.map(name => <div style={{ backgroundColor: '#FFF', border: '1px solid #F8F8F9', padding: '20px 0 20px 20px' }}>
                                            {name}
                                        </div>)
                                    }
                                </div>
                            </div>)
                        }
                    </div>
                </ul>
            </div>
        </div>
    )
}

touchMove(e) {
    // H5新增移动端事件： 监听的是手指按压屏幕后，连续移动
    // 获取当前用户手指的详细信息（移动端独有的！！！！！PC端木有）
    // console.log(e.touches[0].clientX)
    // console.log(e.touches[0].clientY)

    //elementFromPoint: 根据坐标点，获取当前坐标的元素对象
    let curElt = document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY)
    if (curElt && curElt.className == 's_city_cls') {
        // console.log(curElt.innerHTML) //等于右侧的元素，才进行处理

        //让左侧面板滚动到指定DIV上
        this.leftscroll.scrollToElement(document.getElementById(curElt.innerHTML), 300)
    }

}

clickTitle(title) {
    //根据当前点击的元素 决定左侧面板滚动到哪个DIV上
    // this.leftscroll.scrollToElement(document.getElementById(title), 300)
}

componentDidMount() {
    this.leftscroll = new BScroll('#city_box')
}
}