【Codelab】如此简单！一文带你学会 15 个 HarmonyOS JS 组件

【请注意】 本 Demo 只为展现多种 JS 组件用法，购物应用仅为场景演示，并非完整应用，

欢迎各位开发者根据自己的业务场景进行完善哦~

01搜索框组件（search）

<search hint="{{pageWord.searchKeyWord}}" value="{{pageWord.searchValue}}" 
focusable="true" @submit="submitColumn">
</search> 

<!-- xxx.hml-->
<div class="container">
  <text style="margin-left: -7px;">
    <span>Enter text and then touch and hold what you've entered</span>
  </text>
  <search hint="Please enter the search content"  searchbutton="search" onsearch="search" onchange="change" ontranslate="translate" onshare="share" 
  onsubmit="submit">
  </search>
</div>

/* xxx.css */
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #F1F3F5;
}
text{
  width: 100%;
  font-size: 25px;
  text-align: center;
  margin-bottom: 100px;
}

// index.js
import promptAction from '@ohos.promptAction'
export default {
  search(e){
    promptAction.showToast({
      message:  e.value,
      duration: 3000,
    });
  },
  translate(e){
    promptAction.showToast({
      message:  e.value,
      duration: 3000,
    });
  },
  share(e){
    promptAction.showToast({
      message:  e.value,
      duration: 3000,
    });
  },
  change(e){
    promptAction.showToast({
      message:  e.value,
      duration: 3000,
    });
  },
  submit(e){
    promptAction.showToast({
      message: 'submit',
      duration: 3000,
    });
  }
}

<list class="todo-wraper">
	<list-item for="{{lists}}">
		<div @click="detailPage">
			<div class="todo-total">
				<text class="todo-title">
					{{$item.title}}
				</text>
				<text class="todo-content">{{$item.content}}
				</text>
				<text class="todo-price">
					<span>
						￥
					</span>
					<span>
						{{$item.price}}
					</span>
				</text>
			</div>
			<div class="width30">
				<image src="{{$item.imgSrc}}">
				</image>
			</div>
		</div>
	</list-item>
</list>

<divider class="dialog-divider"></divider>

<div>
	<text class="container-my-deals-text">{{pageWord.myDeals}}</text>
	<div class="container-my-deals-div">
		<div class="container-my-deals-div-div" for="{{transaction}}">
			<image src="{{$item.src}}" class="container-my-image"></image>
			<text class="container-my-text">{{$item.title}}{{$item.num}}</text>
		</div>
	</div>
</div>

detailPage() { 
 router.push({ 
 }) 
},

shoppingDetailsPage 代码文件

商品详情页面

07 滑动容器（swiper）

<swiper class="swiper" id="swiper" index="0" autoplay="true" interval="3000" indicator="true" loop="true"
	digital="false">
	<div for="{{ item in swiperList }}">
		<image src="/common/computer/computer{{item}}.png"></image>
	</div>
</swiper>

08 跑马灯组件（marquee）

<dialog id="simpledialog">
	<div>
		<div>
			<div class="container-margin-left-comm">
				<image src="/common/computer/computer1.png" class="dialog-div-titleimage">
				</image>
			</div>
			<div class="dialog-flex-justify">
				<text class="dialog-divs-text1">
					{{pageInfo.annualPrice}}
				</text>
				<text class="dialog-divs-text2">
					{{pageInfo.inventory}}
				</text>
			</div>

			<image src="/common/computer/icon-close.png" class="dialog-divs-icon-close" @click="cancelSchedule">
			</image>
		</div>
		<div class="dialog-div-select">
			<div>
				<text class="dialog-div-select-text">
					{{pageInfo.selectRewardTime}}
				</text>
				<div class="dialog-div-select-picker">
					<picker type="date" selected="{{ newDate }}" hours="24" value="{{ newDate}}" @change="changeDate"
						@cancel="cancelDate">
					</picker>
				</div>
			</div>
			<div>
				<text class="dialog-div-select-text">
					{{pageInfo.selectRewardCity}}
				</text>
				<div class="dialog-div-select-picker">
					<picker type="multi-text" @columnchange="columnTextData" columns="3" range="{{cityList}}"
						value="{{selectCityList}}" @change="changeCity">
					</picker>
				</div>
			</div>
		</div>
		<div class="dialog-div-bottom" @click="buy">
			<text>
				{{pageInfo.nowSell}}
			</text>
		</div>
	</div>
</dialog>

<progress class="min-progress" type="scale-ring" percent="{{progress.percent}}" secondarypercent="{{progress.sec
ondarypercent}}">
</progress>

商品数据分析页面

14 图表组件（chart）

<chart class="chart-data" type="line" ref="linechart" options="{{lineOps}}" 
datasets="{{lineData}}">
</chart>