小程序轮播（纵向，竖向）花样轮播 3D？

原创

于 2022-08-05 13:44:31 发布 · 910 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #3d #javascript

这篇博客介绍了如何在小程序中实现3D纵向轮播的技巧，通过结合wxml、js和wxss代码实现独特的视觉效果。作者鼓励读者探讨并分享其他可能的方法。

在这里插入图片描述

wxml:


<view class="jszxbottom">
    <view class="bg"></view>
    <swiper class="imageContainer" bindchange="handleChange" duration="500" previous-margin="50rpx" current="1" next-margin="50rpx" vertical="false" circular="true">
        <block wx:for="{
    
    {9}}" wx:key="{
    
    {index}}">
        <!-- 解决当轮播为第一个时 上面多余不显示的问题 （这里我写死了两个div）-->
        <view class="huadong {
    
    {index==0&&currentIndex==index?'':'hide'}}"></view>
        <!-- 解决当轮播为最后一个时 下面多余不显示的问题 -->
        <view class="huadongs {
    
    {index==8&&currentIndex==index?'':'hide'}}" style="bottom:-{ 
       { 
       8}}23%;"></view>
        <swiper-item class="sitem">
            <view class="swiper-item {
    
    {currentIndex == index ? 'active': ''}} {
    
    {currentIndex>index?'ab':'cd'}}" data-jiage="{
    
    {item.price}}" bindtap="gojswanshanddinfo">
                <view class="jingxuan_li" data-zxsid="{
    
    {item.id}}" bindtap="gozxsdetails">
                    <view class="jingxuan_zxs"><image src="../img/kefu1.png"></image></view>
                    <view class="jingxuan_cont">
                        <