效果展示
通过使用轮播图组件，同时配置触发器，实现轮播图效果。
创建数据表注意：在数据中心你可以创建属于自己应用程序的数据表格，数据表格类型分为用户表，商品表、订单表和自定义表。
点击数据中心
创建数据表
数据表的字段包含：
创建事件注意：事件是构建数据与界面元素组件链接的抽象逻辑。数据表与界面元素组件通过事件连接。
点击事件中心
创建查询轮播图事件
触发器配置注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。
选中轮播图组件
点击检查面板中的触发器
创建触发器
绑定数据注意：绑定数据可以将事件返回的数据和组件显示内容进行绑定。
选中轮播图的列表条目
点击检查面板中的数据绑定与设置
绑定数据
这样就可以实现轮播图效果了。
这里看不到你轮播的核心代码，所以只能讲一下我的思路；
你可以在控制轮播切换的方法里面加上一段获取当前id下标的代码，然后修改当前页码值；同时如果有焦点和上下一张按钮的时候也要在点击事件内添加获取当前下标的代码。
如果您在使用v-for遍历轮播图时，轮播失效，可能是因为轮播图组件未能正确渲染。这可能是由于以下原因导致的：
数据加载问题：如果从服务器端获取时，数据加载不及时，可能会导致无法在轮播中显示。您可以检查浏览器控制台或网络面板，查看是否有加载错误或请求失败的信息。
数据格式问题：如果您从服务器端获取的数据格式不正确，也会导致轮播失效。您可以检查数据格式是否符合轮播组件的要求，例如是否包含正确的链接。
渲染问题：如果使用v-for遍历轮播图时，未能正确渲染轮播组件，也可能导致轮播失效。您可以检查轮播组件是否被正确绑定和渲染，以及是否在正确的生命周期钩子函数中加载数据。
针对这些可能的原因，您可以进行以下检查和排查：
确保数据可以正确从服务器端加载，并且数据格式正确。
确保轮播组件能够正确接收并渲染从服务器端获取的数据。
检查轮播组件是否被正确绑定和渲染，并且是否在正确的生命周期钩子函数中加载数据。
尝试使用一些调试工具，如Vue DevTools等，来查看组件和数据的状态，以便更好地诊断和解决问题。
如果以上步骤无法解决问题，您可以尝试在Vue社区或相关论坛中寻求帮助，或者咨询相关开发人员。
一轮播图制作思路：
就是通过修改每一张的透明度，让其每隔一段时间将其中的某一张透明度设为1，显示出来；而其它的设为0，不显示。从而实现一种轮流播放的效果。
思路比较简单：
1首先让一组绝对定位，让其重叠在一起，
2通过js获取相应的标签,为后面的步骤做铺垫
3、然后制作手动轮播：点击小方块按钮，显示相应。
（1）通过设置的透明度变化来控制的显示效果。（更简单的效果是直接修改display属性，用display:block让该显示出来,而设置display:none就可以把其他的隐藏起来，这两种方法原理相同。）
（2）当点击小圆点时使它相对应的显示并且当前li的背景颜色设置为白色；
4、点击左右箭头，实现向前向后轮播。
二具体代码实现
首先来看Html结构代码：
<div class="box">
<ul id="boxul">
<li><img src="images/f1jpg" alt=""></li>
<li><img src="images/f2jpg" alt=""></li>
<li><img src="images/f3jpg" alt=""></li>
<li><img src="images/f4jpg" alt=""></li>
<li><img src="images/f5jpg" alt=""></li>
</ul>
<ol id="boxol">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
<div class="prev" id="prev">prev</div>
<div class="next" id="next">next</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
对其进行样式调整之后，都在同一个位置，可以先给第一设置为显示，其它的设为不显示。
下面来看js的代码：
{
padding: 0;
margin: 0;
}
/ 长按标签会有蓝色背景 /
::selection {
background: none;
}
li{
list-style: none;
}
/ 子绝父相 /
box{
width: 800px;
height: 500px;
margin: 50px auto;
position: relative;
}
/ 设置所有的不显示 /
box ul li {
width: 800px;
height: 500px;
position: absolute;
opacity: 0;
/ 过度显示 /
transition: all 8s;
}
/ 设置第一张可见 /
box ul li:first-child {
opacity: 1;
}
/左右箭头/
prev,
next {
width: 80px;
height: 40px;
position: absolute;
/ 背景色 /
background-color: rgba(0, 0, 0, 7);
/ 文字设置 /
color: white;
text-align: center;
line-height: 40px;
/ 位置 /
top: 50%;
margin-top: -20px;
/ 鼠标移上去的效果 /
cursor: pointer;
}
next{
right: 0;
}
prev:active,
next:active {
background-color: rgba(0, 0, 0, 5);
}
prev:hover,
next:hover{
background-color: rgba(0, 0, 0, 6);
}
/ 小方块的位置 /
box ol{
position: absolute;
right: 50px;
bottom: 20px;
}
box ol li {
width: 20px;
height: 20px;
border: 1px solid #ccc;
float: left;
text-align: center;
line-height: 20px;
cursor: pointer;
}
current{
background-color: yellow;
}
img{
width: 800px;
height: 500px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
js的具体代码如下：
//11获取ul元素
var boxul = documentgetElementById("boxul")
var lis = boxulquerySelectorAll("li")
consolelog(lislength);
//12获取ol
var boxol = documentgetElementById("boxol")
//获取Ol下面的li
var ol_lis = boxolquerySelectorAll("li")
//consolelog(ol_lis);
//获得箭头
var prev = documentgetElementById("prev")
var next = documentgetElementById("next")
//给ol的li添加点击事件
for(var i = 0 ;i<ol_lislength;i++){
// consolelog(i);
//给oll的i设置index
ol_lis[i]setAttribute("index",i)
ol_lis[i]onclick = function(){
for(var i = 0 ;i<ol_lislength;i++){
ol_lis[i]className = ""
lis[i]styleopacity = 0
}
thisclassName = "current"
var index = parseInt(thisgetAttribute("index"))
lis[index]styleopacity = 1
}
}
//consolelog(ol_lis);
//2给next按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1
var index = 0;
var old_li = lis[0]
var new_li
nextonclick = function(){
index++
// 到5时，切到第一张图
if(index == lislength){
index = 0
}
old_listyleopacity = 0
new_li = lis[index]
new_listyleopacity = 1
old_li = new_li
//ol下li的颜色变化
for(var i =0;i<lislength;i++){
ol_lis[i]className = ""
}
ol_lis[index]className = "current"
}
//3给上一个按钮注册点击事件，让所有的li的透明度变为0，让当前的透明度变为1
// consolelog(index);
// old_listyleopacity =0
// new_li = lis[index]
// new_listyleopacity = 1
prevonclick = function(){
// 从第一张图到下标为4的图
if(index == 0){
index = lislength
}
index--
old_listyleopacity = 0
new_li = lis[index]
new_listyleopacity = 1
old_li = new_li
//ol下li的颜色变化
for(var i =0;i<lislength;i++){
ol_lis[i]className = ""
}
ol_lis[index]className = "current"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
这里面实现的时候结合了css3的transition属性，让的切换有一个过渡效果
三、相关知识点。
1、获取DOM元素：
（1）documentgetElementsById():通过id获取对象，id是唯一的，可以不获取。
（2）documentgetElementsByClassName()：通过class属性获取对象。
（3）documentgetElementsByTagName()：通过标签名获取对象。
（4）documentquerySelectorAll():可通过所有获取。
2、(1)onmouseover():鼠标移上时事件；
(2)onmouseout():鼠标移开时事件；
3、onclick():单击事件。
1：排出一个版，包含上下切换的标识和导航，所有隐藏，给第一张加一个class名，样式设为显示，导航的第一个加一个class名，加上背景色；
2：获取节点；
3：给向下切换写一个点击事件，点击切换到下一张，注意当切换到最后一张的时候会报错，所以必须要判断一下，当切换到最后一张的时候在，再次击会切换到第一张；
4：给向上切换写一个点击事件，注意当切换到第一张之后会报错，所以必须要判断一下，当切换到第一的时候，再次点击会切换到最后张，循环起来；
5：写一个定时器，定时器的播放顺序和向下切换一致，可以封装一个函数方便调用；
6：写鼠标划入事件，清除定时器；
7：写鼠标移出事件，定时器继续运行；
8：导航的点击事件
点击事件click
定时器setlnterval（）
if判断
for（）循环
<div class="swiper-container">--首先定义一个容器
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="" /></div> --添加
<div class="swiper-slide"><img src="" /></div>
<div class="swiper-slide"><img src="" /></div>
</div>
<div class="swiper-pagination"></div>--小圆点分页器
<div class="swiper-button-prev"></div>--上一页
<div class="swiper-button-next"></div>--下一页
</div>
复制代码
如果想让它动起来，那就继续来写js吧
复制代码
var mySwiper = new Swiper("swiper-container",{
autoplay:1000,--每秒中轮播一次
loop:true,--可以让循环轮播
autoplayDisableOnInteraction:false,--在点击之后可以继续实现轮播
pagination:"swiper-pagination",--让小圆点显示
paginationClickable:true,--实现小圆点点击
prevButton:"swiper-button-prev",--实现上一页的点击
nextButton:"swiper-button-next",--实现下一页的点击
effect:"flip"--可以实现3D效果的轮播
})
复制代码
Swiper轮播的也有它的好处：
1Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
2Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
3Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
同时也有不足之处：(使用Swiper轮播插件ajax请求加载时，无法滑动的问题)
因为banner图是动态创建的，在插件开始初始化时，文档流中没用，所以没有创建相应宽度，通过调整js加载顺序，问题还是没有解决。
最后找到swiper插件 api 有属性是可以根据内容变动，自动初始化插件的，添加observer：true后问题解决！
var mySwiper = new Swiper ('swiper-container', {
pagination: 'swiper-pagination',
autoplay: 5000,
loop: true,
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
})
Swiper拥有丰富的API接口。（不过关于中文文档不多，没找着。）能够让开发者生成个人独有的分页器（pagination），上下滑块的按钮
以及4个回调函数：1onTouchStart
2onTouchMove
3onTouchEnd
4onSlideSwitch。
以上内容是我个人总结，希望对各位有所帮助！
以上就是关于有没有人能指点一下怎么在小程序里配置轮播图呀全部的内容，包括:有没有人能指点一下怎么在小程序里配置轮播图呀、图片轮播 如何获取当前图片的索引、在模板之家下载的前端模板，想把首页轮播图的图片改为从服务器端获取，用v-for遍历的时候轮播失效等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）