uni-app双排一起滑动--两行同步滑动

效果如下所示,就是两行列表同步滑动:

这个横向滚动肯定还是用scroll-view组件,重要的是里面item样式排列,要用到flex布局:


    
    
      
        
         	...  ...
	  
        
      
    



scroll-view {
 white-space: nowrap;
}
/* 去除滚动条 */
::-webkit-scrollbar {
  display:none;
  width:0;
  height:0;
  color:transparent;
}
.nav-bar-wrap {      //  关键的样式
  display: flex;
  flex-flow: column wrap;
  height: 400rpx;
}
.nav-bar-item {
  width: 400rpx;
  display: flex;
  height: 170rpx;
  margin-top: 18rpx ;
  position: relative;
}

ok,然后就阔以看到效果了。

你可能感兴趣的:(uni-app)