CRMEB论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 705|回复: 76

[帮助文档] 小程序商品详情轮播图加上动画加载过渡效果

  [复制链接]

10

主题

79

帖子

879

积分

vip4

Rank: 4

积分
879
发表于 2019-10-24 12:13:08 | 显示全部楼层 |阅读模式
本帖最后由 qq1394880808 于 2019-11-20 21:15 编辑

本来没改之前,首次点进某个商品,或者商品图片比较大高清的情况下,会白屏0.5秒-2秒左右 具体看你图片大小和你服务器宽带而定,反正都会白屏一下体验不怎么好!
改好后效果如下(我传的gif效果图压缩过有点卡顿不流畅,实际使用效果很好)!
789.gif

下来开始教你怎么改!
游客,如果您要查看本帖隐藏内容请回复



6

主题

30

帖子

438

积分

vip4

Rank: 4

积分
438
发表于 2019-10-24 13:58:25 | 显示全部楼层
看一下
回复

使用道具 举报

1

主题

13

帖子

387

积分

vip4

Rank: 4

积分
387
发表于 2019-10-24 15:11:35 | 显示全部楼层
看一下
回复

使用道具 举报

1

主题

19

帖子

253

积分

中级会员

Rank: 3Rank: 3

积分
253
发表于 2019-10-24 15:19:27 | 显示全部楼层
回复

使用道具 举报

0

主题

8

帖子

359

积分

vip4

Rank: 4

积分
359
发表于 2019-10-24 15:22:25 | 显示全部楼层
look
回复

使用道具 举报

6

主题

19

帖子

392

积分

vip4

Rank: 4

积分
392
发表于 2019-10-24 16:29:21 | 显示全部楼层
RE: 小程序商品详情轮播图加上动画加载过渡效果 [修改]
回复

使用道具 举报

0

主题

33

帖子

453

积分

vip4

Rank: 4

积分
453
发表于 2019-10-24 23:46:23 | 显示全部楼层
回复

使用道具 举报

6

主题

28

帖子

574

积分

vip4

Rank: 4

积分
574
发表于 2019-10-25 06:46:03 | 显示全部楼层
回复

使用道具 举报

4

主题

29

帖子

576

积分

vip4

Rank: 4

积分
576
发表于 2019-10-26 22:13:32 | 显示全部楼层
回复

使用道具 举报

发表于 2019-10-27 10:11:13 来自手机 | 显示全部楼层
很厉害
回复

使用道具 举报

0

主题

7

帖子

143

积分

vip4

Rank: 4

积分
143
发表于 2019-10-27 12:33:23 | 显示全部楼层
回复

使用道具 举报

7

主题

37

帖子

763

积分

vip4

Rank: 4

积分
763
发表于 2019-10-27 14:08:19 | 显示全部楼层
体验很好
回复

使用道具 举报

0

主题

17

帖子

239

积分

vip4

Rank: 4

积分
239
发表于 2019-10-27 16:53:10 | 显示全部楼层
学习一下学习一下
回复

使用道具 举报

1

主题

17

帖子

271

积分

vip4

Rank: 4

积分
271
发表于 2019-10-27 20:25:32 | 显示全部楼层
体验很好
回复

使用道具 举报

2

主题

31

帖子

530

积分

vip4

Rank: 4

积分
530
发表于 2019-10-28 10:06:54 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

2

帖子

52

积分

vip4

Rank: 4

积分
52
发表于 2019-10-28 16:36:50 | 显示全部楼层
1111111111
回复

使用道具 举报

1

主题

8

帖子

376

积分

vip4

Rank: 4

积分
376
发表于 2019-10-29 13:15:26 | 显示全部楼层
回复

使用道具 举报

6

主题

19

帖子

427

积分

vip4

Rank: 4

积分
427
发表于 2019-10-29 14:38:53 | 显示全部楼层
look
回复

使用道具 举报

1

主题

6

帖子

102

积分

vip4

Rank: 4

积分
102
发表于 2019-10-29 14:40:14 | 显示全部楼层
:)
回复

使用道具 举报

0

主题

11

帖子

399

积分

vip4

Rank: 4

积分
399
发表于 2019-10-29 17:41:10 | 显示全部楼层
回复

使用道具 举报

3

主题

8

帖子

120

积分

注册会员

Rank: 2

积分
120
发表于 2019-10-30 07:27:15 | 显示全部楼层
不错不错
回复

使用道具 举报

0

主题

25

帖子

476

积分

中级会员

Rank: 3Rank: 3

积分
476
发表于 2019-10-30 13:33:48 | 显示全部楼层
这个体验会好一些~
回复

使用道具 举报

0

主题

2

帖子

75

积分

注册会员

Rank: 2

积分
75
发表于 2019-11-4 10:44:06 | 显示全部楼层
学习学习!
回复

使用道具 举报

1

主题

16

帖子

336

积分

vip4

Rank: 4

积分
336
发表于 2019-11-4 11:46:44 | 显示全部楼层
谢谢分享
回复

使用道具 举报

4

主题

12

帖子

227

积分

vip4

Rank: 4

积分
227
发表于 2019-11-4 15:53:07 | 显示全部楼层
不错呦
回复

使用道具 举报

2

主题

16

帖子

188

积分

vip4

Rank: 4

积分
188
发表于 2019-11-4 17:25:47 | 显示全部楼层
真的假的?
回复

使用道具 举报

2

主题

8

帖子

145

积分

vip4

Rank: 4

积分
145
发表于 2019-11-9 12:34:08 | 显示全部楼层
11111111111111111
回复

使用道具 举报

4

主题

15

帖子

220

积分

vip4

Rank: 4

积分
220
发表于 2019-11-12 16:20:18 | 显示全部楼层
xuexi
回复

使用道具 举报

6

主题

23

帖子

397

积分

vip4

Rank: 4

积分
397
发表于 2019-11-12 22:48:09 | 显示全部楼层
学习学习!
回复

使用道具 举报

5

主题

27

帖子

534

积分

vip4

Rank: 4

积分
534
发表于 2019-11-13 09:04:48 | 显示全部楼层
看看呢
回复

使用道具 举报

10

主题

30

帖子

500

积分

vip4

Rank: 4

积分
500
发表于 2019-11-13 09:48:20 | 显示全部楼层
感谢分享
回复

使用道具 举报

4

主题

25

帖子

363

积分

vip4

Rank: 4

积分
363
发表于 2019-11-13 17:21:50 | 显示全部楼层
看看,谢谢
回复

使用道具 举报

0

主题

5

帖子

150

积分

vip4

Rank: 4

积分
150
发表于 2019-11-13 19:40:41 | 显示全部楼层
学习一下
回复

使用道具 举报

1

主题

28

帖子

581

积分

vip4

Rank: 4

积分
581
发表于 2019-11-14 09:41:01 | 显示全部楼层
不错不错,学习一下看看
回复

使用道具 举报

1

主题

29

帖子

497

积分

vip4

Rank: 4

积分
497
发表于 2019-11-14 10:26:13 | 显示全部楼层
kankan
回复

使用道具 举报

1

主题

11

帖子

324

积分

vip4

Rank: 4

积分
324
发表于 2019-11-14 10:36:50 | 显示全部楼层
回复

使用道具 举报

0

主题

2

帖子

60

积分

vip4

Rank: 4

积分
60
发表于 2019-11-14 21:57:54 | 显示全部楼层
小程序商品详情轮播图加上动画加载过渡效果
回复

使用道具 举报

1

主题

6

帖子

115

积分

vip4

Rank: 4

积分
115
发表于 2019-11-16 09:33:17 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

8

帖子

87

积分

vip4

Rank: 4

积分
87
发表于 2019-11-16 23:04:20 | 显示全部楼层
test11111111111111111
回复

使用道具 举报

3

主题

44

帖子

802

积分

vip4

Rank: 4

积分
802
发表于 2019-11-18 01:26:54 | 显示全部楼层
这个要顶一下哦
回复

使用道具 举报

3

主题

44

帖子

802

积分

vip4

Rank: 4

积分
802
发表于 2019-11-20 11:48:37 | 显示全部楼层
3.1好像 不行,弄完编译报错
回复

使用道具 举报

10

主题

79

帖子

879

积分

vip4

Rank: 4

积分
879
 楼主| 发表于 2019-11-20 15:07:10 | 显示全部楼层
zyluoqun 发表于 2019-11-20 11:48
3.1好像 不行,弄完编译报错

这压根就没改啥呀,就是把灰色背景换成图片背景罢了!你看看是不是自己css代码搞错了
回复

使用道具 举报

3

主题

44

帖子

802

积分

vip4

Rank: 4

积分
802
发表于 2019-11-20 17:45:45 | 显示全部楼层
qq1394880808 发表于 2019-11-20 15:07
这压根就没改啥呀,就是把灰色背景换成图片背景罢了!你看看是不是自己css代码搞错了 ...

又试了次,还是编译报错   
·····WeChat 17:43100% WeChat .·O ./components/productConSwiper/index.
    nexpected token":"
    3|.product-bg.slide- image fwidth:100%:height:100%:} 4|.product-bg .pages {position:absolute:background- color:#fff:height:34rpx:padding:0 10rpx:border- radius:3rpx;right:30rpw:bottom:30rpx:line- height:34rpx:font-size:24rpx:color:#050505:} >5I:background-image:
    url("data:image/gif:base64,R01GODlh7gLuAvegAICAg 编译WXSs文件错误,错误信息如上,可 在控制台查看更详细信息 品只& 首页分类购物车我的
回复

使用道具 举报

3

主题

44

帖子

802

积分

vip4

Rank: 4

积分
802
发表于 2019-11-20 17:48:28 | 显示全部楼层
qq1394880808 发表于 2019-11-20 15:07
这压根就没改啥呀,就是把灰色背景换成图片背景罢了!你看看是不是自己css代码搞错了 ...

CSS 如下 background-image: url("
回复

使用道具 举报

10

主题

79

帖子

879

积分

vip4

Rank: 4

积分
879
 楼主| 发表于 2019-11-20 21:08:28 | 显示全部楼层
zyluoqun 发表于 2019-11-20 17:48
CSS 如下 background-image: url("

我只是举个例子,你不一定要跟我用一模一样的,别用be64格式的 用图片链接也行(但是不能用本地小程序包里边的图片做背景) 只能用外链
回复

使用道具 举报

10

主题

79

帖子

879

积分

vip4

Rank: 4

积分
879
 楼主| 发表于 2019-11-20 21:11:58 | 显示全部楼层
本帖最后由 qq1394880808 于 2019-11-20 21:14 编辑
zyluoqun 发表于 2019-11-20 17:48
CSS 如下 background-image: url("

.product-bg{height:750rpx;position:relative;background-repeat: no-repeat;background-size: 100%;width: 100%;transform: translateZ(0);background-image:url('这里写你的图片外链地址写这里,请勿用小程序包里边的图片地址,只能用外链,不然就转成base64格式都行');}  
回复

使用道具 举报

发表于 2019-11-20 22:37:08 | 显示全部楼层
看着不错学习借鉴下
回复

使用道具 举报

3

主题

44

帖子

802

积分

vip4

Rank: 4

积分
802
发表于 2019-11-21 01:51:53 | 显示全部楼层
qq1394880808 发表于 2019-11-20 21:11
.product-bg{height:750rpx;position:relative;background-repeat: no-repeat;background-size: 100%;widt ...

太热心了,谢谢。我再试下
回复

使用道具 举报

3

主题

44

帖子

802

积分

vip4

Rank: 4

积分
802
发表于 2019-11-21 02:10:14 | 显示全部楼层
qq1394880808 发表于 2019-11-20 21:11
.product-bg{height:750rpx;position:relative;background-repeat: no-repeat;background-size: 100%;widt ...

谢谢你,搞定了。
回复

使用道具 举报

3

主题

44

帖子

802

积分

vip4

Rank: 4

积分
802
发表于 2019-11-21 02:13:33 | 显示全部楼层
我来补充下,让像我这种不懂代码的人明白;官方那文件中有四行,再加一行,粘贴如下内容:

.product-bg{height:750rpx;position:relative;background-repeat: no-repeat;background-size: 100%;width: 100%;transform: translateZ(0);background-image:url('这里填写你转base64码后的代码');}

再次感谢楼主的分享和无私帮助
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|CRMEB论坛

GMT+8, 2020-1-28 05:07 , Processed in 0.046367 second(s), 21 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表