其实很简单,就是个Scroll的简单封装. 但实际项目开发里面,用到的地方还是蛮多的
 

@Builder function empty(){}
/**
 * 一横能横向滚动的 组件
 */
@Component
export default struct BuiHScroll {
  /**
   * 各子项之间的距离
   */
  @State space:number = 1;

  scroller:Scroller = new Scroller();

  @BuilderParam slot: () => void =empty;


  build(){
    Scroll(this.scroller){
      Row({space:this.space}){
        this.slot();
      }.constraintSize({minWidth:'100%'})
    }
    .scrollable(ScrollDirection.Horizontal) // 滚动方向纵向
    .edgeEffect(EdgeEffect.None)
    .width('100%')
    .scrollBarWidth(1)
    .scrollBarColor("rgba(0,0,0,0.01)")
  }

}

使用方式:

唯一注意的是,slot中, 第一层的同级元素 就是一个内部块,不要用容器包围

import BuiHScroll from '../bui/BuiHScroll';
import BuiPage from '../bui/BuiPage';

@Component
export default struct BuiHScrollDemo {


  /**
   * 子项
   */
  @Builder buildContent(){
    Column(){ // 第一个
      Image($r("app.media.demo")).width("100").height(100);
      Text("描述1")
    }
    Column(){ //第二
      Image($r("app.media.demo")).width("100").height(100);
      Text("描述2")
    }
    Column(){ // ...
      Image($r("app.media.demo")).width("100").height(100);
      Text("描述3")
    }
    Column(){
      Image($r("app.media.demo")).width("100").height(100);
      Text("描述4")
    }
    Column(){
      Image($r("app.media.demo")).width("100").height(100);
      Text("描述5")
    }
    Column(){
      Image($r("app.media.demo")).width("100").height(100);
      Text("描述6")
    }
  }

  @Builder buildPageSlot(){
    BuiHScroll({
      slot:()=>{
        this.buildContent()
      }
    });
    Column(){
      Text(`

           BuiHScroll({
              slot:()=>{
                this.buildContent()
              }
            });

            @Builder buildContent(){
              Column(){
                Image($r("app.media.demo")).width("100").height(100);
                Text("描述1")
              }
              Column(){
                Image($r("app.media.demo")).width("100").height(100);
                Text("描述2")
              }


            }

      ` )
    }.width('100%').height(500).backgroundColor("#f5f5f5").margin({top:10})
  }


  build(){
    Column() {


      BuiPage({
        slot:()=>{
          this.buildPageSlot()
        }
      });


    }
  }


}