鸿蒙应用开发练习-Swiper效果展示-鸿蒙开发者社区-51CTO.COM

鸿蒙应用开发练习-Swiper效果展示 原创

鸿蒙时代
发布于 2021-4-24 13:55
浏览
0收藏

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

显示效果:

  鸿蒙应用开发练习-Swiper效果展示-鸿蒙开发者社区

点击“跳转最后一页”

  鸿蒙应用开发练习-Swiper效果展示-鸿蒙开发者社区

点击“展示下一页”

  鸿蒙应用开发练习-Swiper效果展示-鸿蒙开发者社区

点击“展示上一页”

  鸿蒙应用开发练习-Swiper效果展示-鸿蒙开发者社区

Hml文件中的代码

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

完整代码地址:

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

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
已于2021-4-30 17:27:59修改
收藏
回复
举报
回复
    相关推荐