代码拉取完成，页面将自动刷新
⚠️ 此代码仓已归档。新地址请访问 ohos-CoverflowJS。| ⚠️ This repository has been archived. For the new address, please visit ohos-CoverflowJS.
A beautiful cover flow for harmonyOS ACE1.0, Similar to Swiper.
系统组件swiper存在局限性，在滑动的时候添加动画会导致页面闪烁，里面的组件位置错乱，而且没有移动距离的监听。通过自定义swiper组件， 目前已实现左右滑动翻页，左右边距效果，页面随着滑动缩放翻转等动画效果，已实现swiper与list联动滑动效果，以及联动滑动头部折叠展开效果。
仓库地址：https://codehub-y.huawei.com/opensource_insight/JSComponent/Ohos-Coverflow_JS/files?ref=master
| [Normal-CoverFlow] | [transformer-CoverFlow] |
|---|---|
 |
 |
| [transformer-CoverFlow 2] | [linkage-CoverFlow] |
|---|---|
 |
 |
| [linkage1-CoverFlow] | [linkage2-CoverFlow] |
|---|---|
 |
 |
<element name="diyswiper" src="../diyswiper/diyswiper.hml"></element>
<element name="diyswiperitem" src="../diyswiperitem/diyswiperitem.hml"></element>
<div class="container">
<diyswiper>
<block for="{{ lists }}">
<diyswiperitem id="swipe-item-{{ index }}"
@event-type1="itemAnimator"
local-index="{{ $idx }}"
current-index="{{ 0 }}"
item-space="{{ 60 }}"
>
<div slot="item-content" id="slot-{{ index }}">
<slot name="slot-true-item-{{index}}"></slot>
</div>
</diyswiperitem>
</block>
</diyswiper>
</div>
引用：
<element name="diyswiper" src="../diyswiper/diyswiper.hml"></element>
<div class="container">
<diyswiper
id="mySwiper"
current-index="{{ 3 }}" swiper-datas="{{ lists }}" cache-size="{{ 2 }}"
@item-event="dispatchItemEvent">
<block for="{{ lists }}">
<text slot="slot-true-item-{{ $idx }}"id="tv-id">{{ "测试数据" }}</text>
</block>
</diyswiper>
</div>
正确的使用方式如下：
需要使用哪种效果，自己的界面需要复制该效果hml部分的代码，将最里层的组件替换为需要的布局，其他部分不需要改动。如下： 最里层id为itemTv的text可自由替换为自己需要的组件。
<element name="diyswiperitem" src="../diyswiperitem/diyswiperitem.hml"></element>
<div class="container">
<stack class="swiperRoot"
id="swiper"
on:touchstart.bubble="doStart"
on:touchmove.bubble="doMove"
on:touchend.bubble="doEnd"
on:touchcancel.bubble="doCancle">
<block for="{{ (index, value) in lists }}">
<diyswiperitem id="swipe-item-{{ index }}"
current-index="{{ 0 }}"
item-space="{{ 60 }}"
@event-type1="itemEvent"
local-index="{{ index }}">
<div slot="item-content"
id="slot-{{ index }}"
style="width : 100%; height : 100%; align-content : center; justify-content : center;
align-items : center; flex-direction : column; display : flex;">
<text id="itemTv"
style="width : 80%; height : 60%; text-align : center; color : white; background-color : red;
font-size : 16fp;
transform : matrix({{ $item.tempScale }}, {{ $item.tempRotate }}, {{ 0 }}, {{ $item.tempScale }}, {{ 0 }},
{{ 0 }});">
{{ value.title }}
</text>
</div>
</diyswiperitem>
</block>
</stack>
</div>
itemEvent(e) {
if (e == null || e == undefined || e.detail == null || e.detail == undefined) {
return
}
const that = this
let data = e.detail
let index = data.localIndex
let currentPage = data.currentPage
let type = data.type
if (type == "scrollComeEndAnimate" && index == currentPage) {
that.lists[index].itemScale = 1
} else {
that.lists[index].itemScale = 0.8
}
// this.$emit("itemEvent", data)
},
需要使用哪种效果，自己的界面需要复制该效果js部分的代码，将js文件里面的数据list部分替换为自己的数据。通过list里面的自定义属性来控制改变动画效果。
需要使用哪种效果，自己的界面需要复制该效果css部分的代码，自定义替换部分需要自己添加。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手