小程序3D无缝轮播非swiper

轮播图1

css

.mod{
   
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  background-repeat: no-repeat;
}
.nav{
   
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex{
   
  display: flex;
  justify-content: center;
  align-items: center;

}
.flx{
   
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}
.flexs{
   
  display: flex;
  align-items: center;
}
.item{
   
  flex-shrink: 0;
  flex-grow: 0;
  position: absolute;
}
.imgprev {
   
  /* transform-origin: 85% top; */
  position: absolute;
  left: -172rpx;
  top: 52rpx;
  transition: all 0.6s linear;
  transform:scale(0.5)  ;
} 
.imgnext {
   
  /* transform-origin: 15% top; */
  position: absolute;
  left: 492rpx;
  top: 52rpx;
  transition:  all 0.6s linear;
  transform:scale(0.5)  ;
} 
.imgactive {
   
  transform-origin: center top;
  transition:  all 0.6s linear;
  transform: translate(0,0) scale(1) ;
}

axml

<view style="position: relative;width: 714rpx;max-height: 1190rpx;height:{
   {700}}rpx;min-height: 72rpx;margin: 0 auto;overflow: hidden;border-radius: 24rpx;background-color:#fff;">
  <swiper style="position: absolute;z-index:2;width:714rpx;height:{
   {534}}rpx;top:{
   {80}}rpx;">
    <swiper-item>
      <scroll-view catchTouchStart="start" catchTouchMove="move" catchTouchEnd="end">
        <view a:if="{
   {titleCurrent == 0}}" onAppear="onAppear" style="width:714rpx;height:{
   {534 }}rpx;position:relative;" class="flx">
          <block a:for="{
   {goodsArr}}">
            <view onTransitionEnd="onTransitionEnd" style="
                position: absolute;
                width:{
   {450}}rpx;height:{
   {534}}rpx;
                transition: transform .5s linear;
                transition-property: transform,opacity,scale;
                opacity:{
   {style[index].opacity}};
                z-index:{
   {style[index].zIndex}};
                transform-origin:center center;
                transform: translateX({
   {style[index].translateX}}rpx) scale({
   {style[index].scale}}) translateY({
   {0}}rpx) translateZ(0rpx);" class="item">
              <view style="overflow: hidden;width:{
   {450}}rpx;height:{
   {534}}rpx;border-radius:{
   {12}}rpx;">
                <tb-shop-picture source="{
   {uri: item.Imgs}}" style="{
   {width: `${
     450}rpx`,height:`${
     534}rpx`,borderRadius:'24rpx'}}"/>
              </view>
            </view>
          </block>
        </view>
        <view a:if="{
   {titleCurrent == 1}}" onAppear="onAppear" style="width:714rpx;height:{
   {534 }}rpx;position:relative;" class="flx">
          <block a:for="{
   {goodsArr}}">
            <view onTransitionEnd="onTransitionEnd" style="
                position: absolute;
                width:{
   {450}}rpx;height:{
   {534}}rpx;
                transition: transform .5s linear;
                transition-property: transform,opacity,scale;
                opacity:{
   {style[index].opacity}};
                z-index:{
   {style[index].zIndex}};
                transform-origin:center center;
                transform: translateX({
   {style[index].translateX}}rpx) scale({
   {style[index].scale}}) translateY({
   {0}}rpx) translateZ(0rpx);" class="item">
              <view style="overflow: hidden;width:{
   {450}}rpx;height:{
   {534}}rpx;border-radius:{
   {12}}rpx;">
                <tb-shop-picture source="{
   {uri: item.Imgs}}" style="{
   {width: `${
     450}rpx`,height:`${
     534}rpx`,borderRadius:'24rpx'}}"/>
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
    </swiper-item>
  </swiper>
</view>

js

import {
    enhanceComponent } from 'tb-shop-enhance';

Component(enhanceComponent({
   
  data: {
   
    curIndex: 0,
    goodsArr: [],
    translateX: [],
    translateY: [],
    scale: [],
    opacity: [],
    flag: true,
    bscroll: [714, 60, 600, 0],
    thumbnailPos: [20, 20, 600, 250],
    titleCurrent: 0, //设置title
  },
  onInit() {
   
    // mock数据需要修改client文件夹中的page文件
    // 正常运行过程中模块总是默认传入data参数
    const {
    gdc = {
   }, mds = {
   }, modUtils } = this.props.data;
    const moduleData = mds.moduleData;
    if (!moduleData.goodsArr || !moduleData.goodsArr[0] || (moduleData.goodsArr && moduleData.goodsArr[0] && !moduleData.goodsArr[0].Imgs)) {
   
      moduleData.goodsArr = [
        {
   
          "Imgs": "https://img.alicdn.com/imgextra/i1/39767794/O1CN01g4zp7T27Rhb5eHUFv_!!39767794.png",
          "image_height": 534,
          "width": 450,
          "image_width": 450,
          "basic_image_wid