轻栈学堂
快速上手品牌电商独立运营

开发小程序,怎么制作轮播多图的效果?
专栏:轻栈insarea微头条
发布日期:2023-07-15
阅读量:350
作者:轻栈insarea
收藏:
1.用轻栈制作小程序,不需要写代码,想要制作出轮播图的效果,只需要进入【Design Lab】,拖拽添加【轮播多图】组件,右键编辑即可。2.自己写代码开发小程序,使用的是容器组件中的--swiper,在.

1.用轻栈制作小程序,不需要写代码,想要制作出轮播图的效果,只需要进入【Design Lab】,拖拽添加【轮播多图】组件,右键编辑即可。

1689403658172001319.jpg



2.自己写代码开发小程序,使用的是容器组件中的--swiper,

在.wxml里面添加三个轮播:
<swiper>
<swiper-item>
<view class="item">A</view>
</swiper-item>
<swiper-item>
<view class="item">B</view>
</swiper-item>
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>

1689403659619048474.jpg




在.wxss文件中加样式,包括轮播区域固定高度,每张轮播图的大小和高度,对齐效果,以及背景颜色。

.swiper-container{
height:150px;
}


.item{

height:100%;
line-height:150px;
text-align:center;
}


swiper-item:nth-child(1) .item{

background-color: rgb(251, 206, 255);
}
swiper-item:nth-child(2) .item{
background-color: rgb(247, 255, 174);
}
swiper-item:nth-child(3) .item{
background-color: rgb(174, 202, 255);
}

1689403660494025916.gif



swiper组件的常用属性包括indicator(是否显示面板指示点),indicator-color(指示点颜色),indicator-active-color(当前选中的指示点颜色),autoplay(是否自动切换),interval(自动切换时间间隔),circular(是否采用衔接滑动)


看到这里,相信很多人开始觉得头晕眼花了,没有关系,不是还有第一种方法吗,在第三方平台设置图片轮播,只需要右键编辑。

1689403663022080406.jpg

无论是写代码,还是用第三方平台,都能开发小程序,只是难度不同,耗费的时间不同,出来的效果可以一模一样。

上一页:小程序商城设置店铺活动
下一页:制作小程序,进行素材管理
说点什么
发表
最新评论

    本文由轻栈平台用户上传并发布,轻栈仅提供信息发布平台。文章仅代表作者个人观点,不代表轻栈立场。未经作者许可,不得转载。有涉嫌抄袭的内容,请通过反馈中心进行举报。

    电商运营资讯
    轻栈社区
    独立站运营

    热点文章

    轻栈,独立品牌电商新方式!→

    免费使用