swiper组件添加左右箭头_uniappswiper - CSDN文库

需积分: 45 49 浏览量更新于2023-03-03 评论 1 收藏 63KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

swiper组件添加左右箭头组件添加左右箭头

前言：小程序官方swiper组件并未提供带左右箭头功能，但有些时候还是想把左右箭头添加上，今天连胜老师就给大家分享一

下自己的实现方式。

思路很简单：在swiper组件内部添加两个image组件，绑定点击事件，动态改变swiper中的current值。不废话，主要看代码：

WXML:

(此图片来源于网络，如有侵权，请联系删除! )

WXSS:

1. swiper{

2.

3. position:relative;

4.

5. height:300rpx;

6.

7. }

8.

9. swiperimage{

10.

11. display:block;

12.

13. width:100%;

14.

15. height:300rpx;

16.

17. cursor:pointer;

18.

19. }

20.

21. swiper.arrow{

22.

23. width:30rpx;

24.

25. height:46rpx;

26.

27. }

28.

29. swiper.prev{

30.

31. position:absolute;

32.

33. left:0;

34.

35. top:50%;

36.

37. transform:translate(0,-50%);

38.

39. cursor:pointer;

40.

41. }

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

weixin_38622427

粉丝: 0
资源: 951

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈