本帖最后由 qq1394880808 于 2019-11-20 21:15 编辑

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

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



本帖寻求最佳方案

,目前已有 124 个回复 我要奖励
发表于 2019-10-24 13:58:25 | 显示全部楼层
沙发
看一下
回复

使用道具 举报

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

使用道具 举报

1

主题

19

帖子

253

积分

中级会员

Rank: 3Rank: 3

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

发表于 2019-10-24 23:46:23 | 显示全部楼层
7#
回复

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

发表于 2019-10-29 17:41:10 | 显示全部楼层
20#
回复

使用道具 举报

3

主题

8

帖子

124

积分

注册会员

Rank: 2

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

使用道具 举报

0

主题

26

帖子

591

积分

高级会员

Rank: 4

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

使用道具 举报

0

主题

2

帖子

75

积分

注册会员

Rank: 2

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

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

使用道具 举报

发表于 2019-11-20 17:45:45 | 显示全部楼层
43#
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文件错误,错误信息如上,可 在控制台查看更详细信息 品只& 首页分类购物车我的
回复

使用道具 举报

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

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

使用道具 举报

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

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

使用道具 举报

 楼主| 发表于 2019-11-20 21:11:58 | 显示全部楼层
46#
本帖最后由 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 | 显示全部楼层
47#
看着不错学习借鉴下
回复

使用道具 举报

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

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

使用道具 举报

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

谢谢你,搞定了。
回复

使用道具 举报

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

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

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

使用道具 举报

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

    本版积分规则

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

    Powered by Discuz! X3.4  © 2001-2013 Comsenz Inc.