小程序不定数量左右滑动中间放大轮播图效果
Posted 好想再胖十斤
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序不定数量左右滑动中间放大轮播图效果相关的知识，希望对你有一定的参考价值。
具体的样式效果(根据后台传递参数更改展示数量)
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;
}
以上是关于小程序不定数量左右滑动中间放大轮播图效果的主要内容，如果未能解决你的问题，请参考以下文章