鸿蒙应用开发练习-Swiper效果展示 - HarmonyOS技术社区 - 电子技术论坛

李洋水蛟龙

2021-04-24 14:05:11

滑动容器，提供切换子组件显示的能力。下面通过案例演示效果。

显示效果：

点击“跳转最后一页”

点击“展示下一页”

点击“展示上一页”

Hml文件中的代码

&lt;div class=&quot;container&quot;&gt;
&lt;swiper class=&quot;swiper&quot; id=&quot;swiper&quot; index=&quot;0&quot; indicator=&quot;true&quot; loop=&quot;true&quot; digital=&quot;false&quot;&gt;
      &lt;div class = &quot;swiperContent&quot; &gt;
         &lt;text class = &quot;text&quot;&gt;第一页&lt;/text&gt;
      &lt;/div&gt;
      &lt;div class = &quot;swiperContent&quot;&gt;
         &lt;text class = &quot;text&quot;&gt;第二页&lt;/text&gt;
      &lt;/div&gt;
      &lt;div class = &quot;swiperContent&quot;&gt;
         &lt;text class = &quot;text&quot;&gt;第三页&lt;/text&gt;
      &lt;/div&gt;
&lt;/swiper&gt;
&lt;input class=&quot;button&quot; type=&quot;button&quot; value=&quot;跳转最后一页&quot; onclick=&quot;swipeTo&quot;&gt;&lt;/input&gt;
&lt;input class=&quot;button&quot; type=&quot;button&quot; value=&quot;展示下一页&quot; onclick=&quot;showNext&quot;&gt;&lt;/input&gt;
&lt;input class=&quot;button&quot; type=&quot;button&quot; value=&quot;展示上一页&quot; onclick=&quot;showPrevious&quot;&gt;&lt;/input&gt;
&lt;/div&gt;

完整代码地址：

https://gitee.com/jltfcloudcn/jump_to/tree/master/swiper

回帖高级模式

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。侵权投诉

[文章]鸿蒙应用开发练习-Swiper效果展示

回帖高级模式