ReactDemo-----路线小组件

1.实现效果：

2.实现代码：

js代码：

render() {
    const {TooltipVisible,data} = this.state
    const colors = ['yellow','green','blue','gray','pink','red',]

    return (
      <div className={styles.main}>
        <div className={styles.title}>最佳旅游线路</div>

        <div className={styles.way}>

          {
            data.map((val,index)=>{
              //拿到代表每一条路线的数组val
              // console.log(val)
              //为每一条路线准备相应的颜色，通过数组[index]来得到颜色
              let routeColor = colors[index]
              // console.log(routeColor)
              return (
                //1.给每一条路线匹配一个虚拟dom，2.并且每条路线需要一个颜色
                //=============key使用index拼接route
                <div className={styles.everyWay} key={val[index]} style={{backgroundColor:routeColor}}>
                  {
                    val.map((item)=>{
                      // 拿到路线上的每一个景点
                      // console.log(item)
                      // 设置一个leftLong用来给每个元素距离左端的距离
                      const leftLong = (item.scenicId.charAt(item.scenicId.length-1)*5+'0px')
                      // {console.log(leftLong)}
                      return (
                        //1.给每一个景点匹配一个dom节点 2.给每个景点都匹配与本route相同的颜色routeColor
                        <Tooltip placement="top" title={item.scenicName} key={item.scenicId} visible={TooltipVisible} color={routeColor}>
                          {/*这是进度条上的小圆点*/}
                          <div className={styles.point} style={{left:leftLong}}></div>

                        </Tooltip>
                      )
                    })
                  }
                </div>
              )
            })
          }

        </div>


      </div>
    )
  }

less代码：

.main {

  width: 480px;
  height: 270px;
  border: 1px solid #ff0000;
  //background-color: #222222;

  .title {
    height: 10% ;
    color: #b79a28;
    font-weight: bold;
    //border: 1px solid red;
  }

  .way{
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: solid 1px red;
  }
  
}

// map出来的元素样式需要在这里另外写，如果用嵌套写法写到里面获取不到
.everyWay{
  width: 90%;
  height: 5px;
  margin: 50px auto;
  position: relative;
  background-color: #cab390;
  border-radius: 2px ;

  .point{
    width: 8px;
    height: 8px;
    position: absolute;
    top:-1px;
    left:30%;
    background-color: #fff;
    border: rgba(74,106,87,0.26) 1px solid;
  }
}

3.实现思路

1. 用div实现长条，用定位布局将<提示框和小方块组成的整体>定位到长条上面。
2. <提示框和小方块组成的整体>：使用antDesign里面的组件。
3. 实现多个长条：需要用到的是map遍历的方法，并且由于接口数据报文是"data":[
   [ {
   " scenicName “:“黄山”,” scenicId ":“0202”,},{
   " scenicName “:“天柱山”,” scenicId ":“0203”,},{
   " scenicName “:“西递”,” scenicId ":“0204”,}
   ],[ {
   " scenicName “:“宏村”,” scenicId ":“0205”,},{
   " scenicName “:“九华山”,” scenicId ":“0206”,},{
   " scenicName “:“古徽州”,” scenicId ":“0207”,}
   ],],
   是两层嵌套的数据，所以需要我们进行嵌套的map遍历。

4.补充

1. 遍历使得每个小滑块的得到的位置都一样，如何使他们间隔开，不重叠？
   就这个问题可以使用两种策略：比如使用index编号给他乘以一个数字，这种策略可以简单的让他们分开；复杂的话就是使用switch来设置判断条件，来给到对应的位置，可以达到位置受控的效果。