小程序不定數量左右滑動中間放大輪播圖效果

阿新 • • 發佈：2017-11-14

ice hid amp length dot 更改 import fix absolute

具體的樣式效果(根據後臺傳遞參數更改展示數量)

技術分享

HTML代碼

<!-- 秒拼產品模塊 備選樣式1-->
	<view style="white-space: nowrap;" class="seceGroupBtn" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"  wx:if="{{mpThing[0]}}">
		<view class="seceGroupBtn_in_box seceGroupBtn_in_box1" data-goodsId="{{mpThing[mpThing.length-1].goods_id}}" wx:if="{{yFlage&&mpThing.length>2}}" data-id="{{mpThing.length-1}}" bindtap="navSeceGroup">
			<view class="imageBox_t">
				<image src="{{mpThing[mpThing.length-1].goods_img}}" mode="widthFix"></image>
			</view>
			<view class="titleNameBox">
				<view class="titleNameBox_l">秒拼</view>
				<view class="titleNameBox_r">{{mpThing[mpThing.length-1].goods_name}}</view>
			</view>
			<view class="priceBox">
				<view class="priceBox_l">
					<text class="fontFh">￥</text>{{mpThing[mpThing.length-1].goods_price}}
				</view>
				<view class="priceBox_r">
					<text>已售{{mpThing[mpThing.length-1].sales}}</text>
				</view>
			</view>
		</view>

	    <view class="seceGroupBtn_in_box {{indexSeceGroupSty[index]}} {{opacitySty[index]}} {{indexUn[index]}}"  wx:for="{{mpThing}}" data-id="{{index+1}}" data-goodsId="{{item.goods_id}}" style="margin-left: 0rpx;" bindtap="navSeceGroup">
			<view class="imageBox_t">
				<image src="{{item.goods_img}}" mode="widthFix"></image>
			</view>
			<view class="titleNameBox">
				<view class="titleNameBox_l">秒拼</view>
				<view class="titleNameBox_r">{{item.goods_name}}</view>
			</view>
			<view class="priceBox">
				<view class="priceBox_l">
					<text class="fontFh">￥</text>{{item.goods_price}}
				</view>
				<view class="priceBox_r">
					<text>已售{{item.sales}}</text>
				</view>
			</view>
	    </view>
		
		<view wx:if="{{zFlage&&mpThing.length>2}}" data-goodsId="{{mpThing[0].goods_id}}" class="seceGroupBtn_in_box seceGroupBtn_in_box3" data-id="0" bindtap="navSeceGroup">
			<view class="imageBox_t">
				<image src="{{mpThing[0].goods_img}}" mode="widthFix"></image>
			</view>
			<view class="titleNameBox">
				<view class="titleNameBox_l">秒拼</view>
				<view class="titleNameBox_r">{{mpThing[0].goods_name}}</view>
			</view>
			<view class="priceBox">
				<view class="priceBox_l">
					<text class="fontFh">￥</text>{{mpThing[0].goods_price}}
				</view>
				<view class="priceBox_r">
					<text>已售{{mpThing[0].sales}}</text>
				</view>
			</view>
		</view>
  	</view>
  	<!-- 觸控點模塊 -->
  	<view class="pointingStick_box" wx:if="{{mpThing[0]}}">
		<view class="contentButtonBox">
			<view class="contentButtonBox_in_box {{buttonFlag[index]}}" wx:for="{{buttonFlag}}" data-id="{{index}}" bindtap="touchRadus"></view>
		</view>
  	</view>

　　無限輪播的原理,前面後面各自設置一個起始結束的模塊

touchRadus:function(e){
    var that = this;
    var unionid = wx.getStorageSync(‘thisCode‘);
    let indexSeceGroupSty = that.data.indexSeceGroupSty;
    // 定義可執行參數
    let seceGroupArr = that.data.mpThing;
    // 定義透明值
    let opacitySty = that.data.opacitySty;
    let nowAdress = e.target.dataset.id;
    let buttonFlag = that.data.buttonFlag;
    // 觸控點控制
    for(let j=0;j<seceGroupArr.length;j++){
      buttonFlag[j] = "";
    }
    if(nowAdress >= seceGroupArr.length){
      nowAdress = 0; 
    }
    if(nowAdress<=0){
      that.setData({
         yFlage:true,
         zFlage:false,
      })
    }else if(nowAdress==seceGroupArr.length-1){
      that.setData({
         yFlage:false,
         zFlage:true,
      })
    }else{
      that.setData({
         yFlage:false,
         zFlage:false,
      })
    }
    buttonFlag[nowAdress] = "contentButtonBox_in_box_hover";
    this.data.done = true;
    for(let j=nowAdress;j<seceGroupArr.length;j++){
      indexSeceGroupSty[j] = "seceGroupBtn_in_box3";
    }
    for(let b=0;b<nowAdress;b++){
      indexSeceGroupSty[b] = "seceGroupBtn_in_box1";
    }
    indexSeceGroupSty[nowAdress] = "seceGroupBtn_in_box2";
    // 沒有輪到的隱藏
    
    if(nowAdress<=0){
      for(let j=0;j<seceGroupArr.length;j++){
        opacitySty[j] = "opacitySty";
      }
      opacitySty[nowAdress] = "";
      opacitySty[nowAdress+1] = "";

      }else if(nowAdress >= seceGroupArr.length){
        for(let j=0;j<seceGroupArr.length;j++){
          opacitySty[j] = "opacitySty";
        }
        opacitySty[seceGroupArr.length-1] = "";
        opacitySty[seceGroupArr.length-2] = "";

      }else{
        for(let j=0;j<seceGroupArr.length;j++){
          opacitySty[j] = "opacitySty";
        }
        opacitySty[nowAdress+1] = "";
        opacitySty[nowAdress] = "";
        opacitySty[nowAdress-1] = "";
    }
    that.setData({
      indexSeceGroupSty:indexSeceGroupSty,
      nowAdress:nowAdress,
      opacitySty:opacitySty,
      buttonFlag:buttonFlag
    })
  },

　　點擊下方觸摸圓圈讓相應的模塊放到中間

//觸摸開始事件
  touchstart: function(e) {
    this.data.touchDot = e.touches[0].pageX;
    var that = this;
  },
  //觸摸移動事件
  touchmove: function(e) {
    var unionid = wx.getStorageSync(‘thisCode‘);
    var that = this;
    let touchMove = e.touches[0].pageX;
    let touchDot = this.data.touchDot;
    let time = this.data.time;
    let indexSeceGroupSty = that.data.indexSeceGroupSty;
    // 定義可執行參數
    let seceGroupArr = that.data.mpThing;
    // 定義透明值
    let opacitySty = that.data.opacitySty;
    // 定義層級
    let indexUn = that.data.indexUn;
    //向左滑動
    if(touchMove - touchDot <= -40 && !this.data.done) {
      let nowAdress = that.data.nowAdress;
      let buttonFlag = that.data.buttonFlag;
      // 觸控點控制
      for(let j=0;j<seceGroupArr.length;j++){
        buttonFlag[j] = "";
      }
      nowAdress++;
      if(nowAdress >= seceGroupArr.length){
        nowAdress = 0;
        for(let j=0;j<seceGroupArr.length;j++){
          indexSeceGroupSty[j] = "seceGroupBtn_in_box3";
        }
        that.setData({
          indexSeceGroupSty:indexSeceGroupSty,
        })
      }else{
      }
      if(nowAdress<=0){
        that.setData({
           yFlage:true,
           zFlage:false,
        })
      }else if(nowAdress==seceGroupArr.length-1){
        that.setData({
           yFlage:false,
           zFlage:true,
        })
      }else{
        that.setData({
           yFlage:false,
           zFlage:false,
        })
      }
      buttonFlag[nowAdress] = "contentButtonBox_in_box_hover";
      this.data.done = true;
      for(let j=nowAdress;j<seceGroupArr.length;j++){
        indexSeceGroupSty[j] = "seceGroupBtn_in_box3";
      }
      for(let b=0;b<nowAdress;b++){
        indexSeceGroupSty[b] = "seceGroupBtn_in_box1";
      }
      indexSeceGroupSty[nowAdress] = "seceGroupBtn_in_box2";
      // 沒有輪到的隱藏
      
      if(nowAdress<=0){
        for(let j=0;j<seceGroupArr.length;j++){
          opacitySty[j] = "opacitySty";
          indexUn[j] = ""
        }
        opacitySty[nowAdress] = "";
        opacitySty[nowAdress+1] = "";
        indexUn[nowAdress+1] = "indexUn";

        }else if(nowAdress >= seceGroupArr.length){
          for(let j=0;j<seceGroupArr.length;j++){
            opacitySty[j] = "opacitySty";
            indexUn[j] = ""
          }
          opacitySty[seceGroupArr.length-1] = "";
          opacitySty[seceGroupArr.length-2] = "";
          indexUn[seceGroupArr.length-2] = "indexUn";
        }else{
          for(let j=0;j<seceGroupArr.length;j++){
            opacitySty[j] = "opacitySty";
          }
          opacitySty[nowAdress+1] = "";
          opacitySty[nowAdress] = "";
          opacitySty[nowAdress-1] = "";
          indexUn[nowAdress+1] = "indexUn";
      }
      that.setData({
        indexSeceGroupSty:indexSeceGroupSty,
        nowAdress:nowAdress,
        opacitySty:opacitySty,
        buttonFlag:buttonFlag,
        indexUn:indexUn
      })
    }
    //向右滑動
    if (touchMove - touchDot >= 40 && !this.data.done) {
      let nowAdress = that.data.nowAdress;
      let buttonFlag = that.data.buttonFlag;
      this.data.done = true;
      nowAdress--;
      if(nowAdress<0){
        nowAdress = seceGroupArr.length-1;
        for(let j=0;j<seceGroupArr.length;j++){
          indexSeceGroupSty[j] = "seceGroupBtn_in_box1";
        }
        that.setData({
          indexSeceGroupSty:indexSeceGroupSty,
        })
      }else{

      }

      if(nowAdress<=0){
        that.setData({
           yFlage:true,
           zFlage:false,
        })
      }else if(nowAdress==seceGroupArr.length-1){
        that.setData({
           yFlage:false,
           zFlage:true,
        })
      }else{
        that.setData({
           yFlage:false,
           zFlage:false,
        })
      }
      for(let j=0;j<seceGroupArr.length;j++){
        buttonFlag[j] = "";
      }
      buttonFlag[nowAdress] = "contentButtonBox_in_box_hover";
      this.data.done = true;
      for(let j=0;nowAdress>j;j++){
        indexSeceGroupSty[j] = "seceGroupBtn_in_box1";
      }
      for(let b=seceGroupArr.length;b>nowAdress;b--){
        indexSeceGroupSty[b] = "seceGroupBtn_in_box3";
      }
      indexSeceGroupSty[nowAdress] = "seceGroupBtn_in_box2";
      // 沒有輪到的隱藏
      if(nowAdress<=0){
        for(let j=0;j<seceGroupArr.length;j++){
          opacitySty[j] = "opacitySty";
        }
        opacitySty[nowAdress] = "";
        opacitySty[nowAdress+1] = "";

        }else if(nowAdress >= seceGroupArr.length){
          for(let j=0;j<seceGroupArr.length;j++){
            opacitySty[j] = "opacitySty";
          }
          opacitySty[seceGroupArr.length-1] = "";
          opacitySty[seceGroupArr.length-2] = "";

        }else{
          for(let j=0;j<seceGroupArr.length;j++){
            opacitySty[j] = "opacitySty";
          }
          opacitySty[nowAdress+1] = "";
          opacitySty[nowAdress] = "";
          opacitySty[nowAdress-1] = "";
      }
      
      this.setData({
        indexSeceGroupSty:indexSeceGroupSty,
        nowAdress:nowAdress,
        opacitySty:opacitySty,
        buttonFlag:buttonFlag
      })
    }
  },
//觸摸結束事件
  touchend: function(e) {
    clearInterval(this.data.interval);
    this.data.time = 0;
    this.data.done = false;
  },

　　左右滑動的代碼

/*觸控點樣式*/
.pointingStick_box{
    background: #fff;
    width: 100%;
    padding: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pointingStick_box .contentButtonBox{
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.pointingStick_box .contentButtonBox .contentButtonBox_in_box{
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    border: 2rpx #666 solid;
    margin-right: 8rpx;
    background: #fff;
}
.pointingStick_box .contentButtonBox .contentButtonBox_in_box_hover{
    background: #f8b23a;
}
/*主題樣式*/
/*秒拼產品模塊*/
.seceGroupBtn{
    width: 100%;
    height: 400rpx;
    position: relative;
    background: #fff;
}
.seceGroupBtn .seceGroupBtn_in_box{
    width: 200rpx;
    height: 280rpx;
    position: absolute;
    top: 55rpx;
    opacity: 1;
    z-index: 1;
    padding: 10rpx;
    box-shadow: 0rpx 0rpx 5rpx #999;
    background: #fff;
}
.seceGroupBtn .seceGroupBtn_in_box1{
    display: block;
    left: 10rpx;
    opacity: 1;
    z-index: 1;
    animation: mymoveL1 .2s ease;
}
.seceGroupBtn .seceGroupBtn_in_box2{
    display: block;
    left: 53%;
    transform: scale(1.2) translateX(-50%);
    opacity: 1;
    z-index: 3;
}
.seceGroupBtn .seceGroupBtn_in_box3{
    display: block;
    right: 10rpx;
    opacity: 1;
    z-index: 1
}
.seceGroupBtn  .opacitySty{
    /*display: none;*/
    opacity: 0 !important;
    display: none !important;
}
.pointingStick_box{
    background: #fff;
    width: 100%;
    padding: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pointingStick_box .contentButtonBox{
    position: relative; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.pointingStick_box .contentButtonBox .contentButtonBox_in_box{
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    border: 2rpx #666 solid;
    margin-right: 8rpx;
    background: #fff;
}
.pointingStick_box .contentButtonBox .contentButtonBox_in_box_hover{
    background: #f8b23a;
}
.seceGroupBtn_in_box .imageBox_t{
    width: 100%;
    height: 200rpx;
    overflow: hidden;
}
.seceGroupBtn_in_box .imageBox_t image{
    width: 100%;
}
.seceGroupBtn_in_box .titleNameBox{
    height: 50rpx;
    display: flex;
    align-items: center;
}
.seceGroupBtn_in_box .titleNameBox .titleNameBox_l{
    background: #d13d4b;
    color: #fff;
    font-size: 18rpx;
    padding: 3rpx 6rpx;
    margin-right: 3rpx;
    border-radius: 5rpx;
    text-align: center;
}
.seceGroupBtn_in_box .titleNameBox .titleNameBox_r{
    font-size: 22rpx;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.seceGroupBtn_in_box .priceBox{
    width: 100%;
    height: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.seceGroupBtn_in_box .priceBox .priceBox_l{
    color: #d13d4b;
    font-size: 22rpx;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width: 70%;
}
.seceGroupBtn_in_box .priceBox .fontFh{
    font-size: 20rpx;
}
.seceGroupBtn_in_box .priceBox .priceBox_r{
    font-size: 20rpx;
    color: #666;
}
.indexUn{
    z-index: -2;
}

小程序不定數量左右滑動中間放大輪播圖效果

ice hid amp length dot 更改 import fix absolute 具體的樣式效果(根據後臺傳遞參數更改展示數量) HTML代碼  <view style="white-space: n

QML實現網頁左右滑動的輪播圖效果

網頁中有很多的左右滑動的圖片輪動的效果。QML實現此效果的兩種方式。 PageIndicator和TabBar 也對應兩種樣式。其中左右滑動的動畫效果是利用SwipeView的預設切換動畫效果 import QtQuick 2.9 import QtQuick.Controls 2.

綁定bindchange事件的微信小程序swiper閃爍，抖動問題解決，（將微信小程序切換到後臺一段時間，再打開微信小程序，會出現瘋狂循環輪播，造成抖動現象）

com 程序開發記錄 his 其他我們 tin 開發文檔出現微信小程序開發文檔-組件-swiper後面追加的新聞如上圖所示；如果在bindchange事件給swiper的current屬性對應的值{{current}}賦值，就會造成抖動現象。 1 bind

原生js解決圖片點擊左右切換（簡單輪播圖）

邏輯關系 element logs 內容點擊切換 osi 圖片 width eight 想寫一個綜合性的小案例，主要會運用到數組和判斷以及我前面幾篇博客所復習到的js的知識。今天案例想要實現的效果圖如下圖所示：效果是：點擊“循環切換”按鈕，那麽“一號”位置的文案就要

1、js原生實現移動端手指滑動輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width

js原生實現移動端手指滑動輪播圖效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev

微信小程序布局左右三區塊

*** -- 程序 flex 分享 width display pla splay /* 3三區塊部分 *************/ .wear-diamonds{ display: flex; width: 100%; height: 300rpx; } .wea

【微信小程序】獲取輪播圖當前圖片下標、滑動展示對應的位數、點擊位數展示對應圖片

set spec get auto mage cover 切換圖片 gevent 自動播放業務需求： 3個圖片輪番播放，可以左右滑動，點擊指示點可以切換圖片 index.wxml：這裏使用小程序提供的<swiper>組件autoplay：自動播放inter

小程序裏禁止頁面滑動

log catch post pre mov cat dal style 頁面滑動 <view class="modal_bg" catchtouchmove="true" fixed="true" wx:if="{{ modal_show }}"><

使用ViewPager和Photoview實現圖片左右滑動和放大縮小

為了實現圖片的左右滑動以及放大縮小的功能，用到了兩個元件ViewPager和PhotoView。 PhotoView是開源專案，它也是通過繼承ImageView然後擴充功能，實現圖片放大縮小等功能；而載入網路圖片用到了ImageLoader這個開源元件。工欲善其事必先

如何使用微信小程序制作banner輪播圖？

src tom idt 屬性 mod 隱藏使用生命周期 eight 在前端工程師的工作中，banner是必不可少的，那缺少了DOM的小程序是如何實現banner圖的呢?如同其他的框架封裝了不同的banner圖的方法，小程序也封裝了banner的方法，來讓我一一道來：

java微信小程序參數二維碼生成帶背景圖加字體(無限生成)

width sts addheader parent mob leo asics con system 需求： 1，因為項目需求，生成數以萬計的二維碼　　　　 2 ，每個二維碼帶不同的參數　　 3，二維碼有固定背景圖

小程序自定義輪播圖

tran index scroll false ges als -a ndt -s 話不多說，上圖上代碼。 wxml <view style="white-space: nowrap;" class="box" bindtouchstart="touchstart

如何自定義微信小程序swiper輪播圖面板指示點的樣式

url string 但是選擇器 idt cat horizon jpg con https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper組件是滑塊視圖容器，也就是說平常我們看到的輪播圖就可以用它來做，不過這

微信小程序輪播圖

index center for 屬性 IE per XP dex tor 我們開發web頁面的時候，無論是圖片還是模塊，很多時候會用到輪播，那麽下面是微信小程序的輪播功能，也是小程序自帶的swiper輪播功能。下面是輪播展示圖：熟悉一下swiper配置屬性，這裏

小程序--swiper輪播圖組件

query light developer 控制 url per size 有一個 weixin 效果圖展示：先了解下swiper組件參數配置輪播實現的具體步驟如下：第一步：添加圖片素材，我這邊是放到images下，文件以及圖片名字自定義即可。第二步：在w

小程序輪播圖部分

計算 var ext index detail view header () set 輪播圖 <view class="swiper-container"> <swiper autoplay="{{autoplay}}" interval="

微信小程序之輪播圖的實現（附效果圖和源碼）

class git 源代碼 nload car 源碼 github項目小程序 swiper 不管是做APP開發還是小程序，移動端離不開輪播圖的功能，下面就寫一個小程序的輪播圖功能分享給大家效果圖： step1:頁面index.wxml代碼 <!--index.w

微信小程序之視圖容器（swiper）組件創建輪播圖

lis center width png slide 滑動動畫 -a indicator navigator 一、視圖容器（Swiper） 1、swiper：滑塊視圖容器微信官方文檔：https://developers.weixin.qq.com/minip

小程序旋轉木馬輪播圖

第一次啟動 jpg bbf nsf style 展示位置分享圖片 data 前言看下效果吧分析自動滾動+手動拖拽（原生組件幫我們完成 Property：autoplay）面板指示點（原生組件幫我們完成 Property：indicator-dots）左右

小程序不定數量左右滑動中間放大輪播圖效果

相關推薦