具体的样式效果(根据后台传递参数更改展示数量)
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;
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{
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{
100%;
height: 400rpx;
position: relative;
background: #fff;
}
.seceGroupBtn .seceGroupBtn_in_box{
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;
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{
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{
100%;
height: 200rpx;
overflow: hidden;
}
.seceGroupBtn_in_box .imageBox_t image{
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{
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- 70%;
}
.seceGroupBtn_in_box .priceBox .fontFh{
font-size: 20rpx;
}
.seceGroupBtn_in_box .priceBox .priceBox_r{
font-size: 20rpx;
color: #666;
}
.indexUn{
z-index: -2;
}