【RISC-V 生态软件系列】Waft UI基础二：Image的使用方法

获取示例源码

git clone git@gitee.com:tsing-qiu/waft-ui.git
硬件准备


ui demo整体说明

页面导航


{
  "pages": [
    "pages/home/index",
    "pages/test-dialog/index",
    "pages/test-list/index",
    "pages/test-loading/index",
    "pages/test-swiper/index",
    "pages/test-video/index",
    "pages/test-picker/index",
    "pages/test-slider/index",
    "pages/test-button/index",
    "pages/test-navbar/index",
    "pages/test-tabs/index",
    "pages/test-image/index"
  ],
  "default": "pages/home/index",
  "window": {
    "defaulttitle": "Waft UI"
  }
}
Image使用








样式文件


.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-color: #eeeeee;
}
.content{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 30rpx;
}
布局文件



  
  
   
  

逻辑控制


{
  "usingComponents": {
    "x-nav-bar": "../assembly/nav-bar/nav-bar",
    "x-image":"../assembly/image/image"
  },
  "state": {
  }
}
效果展示





文章转载自：平头哥芯片开放社区 作者：晚空