标签：scenicId val color 小组 height scenicName item ----- ReactDemo

1.实现效果：

2.实现代码：

js代码：

<div className={styles.way}>

          {
            data.map((val,index)=>{
              //拿到代表每一条路线的数组val
              // console.log(val)
              return (
                //给每一条路线匹配一个虚拟dom，
                //=============key使用index拼接route
                <div className={styles.everyWay} key={val[index]}>
                  {
                    val.map((item)=>{
                      // 拿到路线上的每一个景点
                      // console.log(item)
                      // 设置一个leftLong用来给每个元素距离左端的距离
                      const leftLong = (item.scenicId.charAt(item.scenicId.length-1)*5+'0px')
                      // {console.log(leftLong)}
                      return (
                        //给每一个景点匹配一个dom节点
                        <Tooltip placement="top" title={item.scenicName} key={item.scenicId} visible={TooltipVisible} color={"red"}>
                          {/*这是进度条上的小圆点*/}
                          <div className={styles.point} style={{left:leftLong}}></div>

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

        </div>

less代码：

.main {

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

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


}


.everyWay{
  width: 90%;
  height: 5px;
  margin: 50px auto;
  color: #6ce0eb;
  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来设置判断条件，来给到对应的位置，可以达到位置受控的效果。

标签：scenicId,val,color,小组,height,scenicName,item,-----,ReactDemo
来源： https://blog.csdn.net/qq_43198793/article/details/110245917

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。