微信小程序自定义轮播图

最新推荐文章于 2024-05-17 09:03:34 发布
最新推荐文章于 2024-05-17 09:03:34 发布
阅读量687 收藏 3
点赞数
文章标签： 小程序
原文链接：https://www.cnblogs.com/yxxrui/p/wechatDiySlider.html
版权

实现效果

在这里插入图片描述

在这里插入图片描述

wxml：

<view bindtouchcancel="sliderTouchCancel" bindtouchstart='sliderTouchStart' bindtouchend='sliderTouchEnd' bindtouchmove='sliderTouchMove' style='width:{{yxxruiSliderData.totalWidth}}px;display:flex;transform:translate({{yxxruiSliderX}}px,0)'>

    <block wx:for="{{yxxruiSliderData.datas}}" wx:for-index="i" wx:key="i">

      <view class="slider-item" style="padding-left:{{yxxruiSliderData.blankWidth}}px;">

        <form class="slider-form" bindsubmit="" report-submit="true" data-posttype="" data-posturl="" data-appId="">

          <button>

            <image class="slider-img" src="{{item}}"/>

          </button>

        </form>

      </view>

    </block>

  </view>

</view>

<view class="slider-indicate-dots">

  <block wx:for="{{yxxruiSliderData.indicateDots}}" wx:for-index="i"  wx:key="i">

    <view class="slider-indicate-dot {{i==yxxruiSliderCurPage-1?'active':''}}">

    </view>

  </block>

</view>

wxss:

/*自定义轮播图样式 */

.yxxrui-slider{

display: block;

}

.yxxrui-slider .slider-item{

position:relative;

display:inline-block;

width:100%;

box-sizing:border-box;

overflow: hidden;

line-height: 0;

}

.yxxrui-slider .slider-form{

position:relative;

display:inline-block;

width:100%;

}

.yxxrui-slider .slider-img{

border-radius: 14px;

width:100%;

height: 180px;

}

.yxxrui-slider .slider-item button{

line-height: 0;

box-sizing: border-box;

-moz-box-sizing:border-box; /* Firefox */

-webkit-box-sizing:border-box; /* Safari */

padding-left: 0;

padding-right: 0;

}

.yxxrui-slider .slider-indicate-dots{

line-height: 0;

z-index:9999;

margin-top: -14px;

padding-bottom: 8px;

position: relative;

text-align:center;

}

.yxxrui-slider .slider-indicate-dot{

width:6px;

height:6px;

background:rgba(255, 255, 255, 0.5);

display:inline-block;

margin-right:4px;

border-radius:100%;

line-height: 0;

box-sizing: border-box;

}

.yxxrui-slider .button-hover{

background: none;

}

.yxxrui-slider .slider-indicate-dot.active{

background: white;

width:16px;

border-radius:4px;

}

js

var myslider = require(’…/…/utils/yxxrui.slider.js’);

//index.js

//获取应用实例

const app = getApp();

Page({

data: {

indicatorDots: false,

autoplay: false,

interval: 5000,

duration: 1000,

curPage:1,

x: 0

},

onLoad:function(){

myslider.initMySlider({

  that:this,

  datas: [

    '../../img/1.jpg',

    '../../img/2.jpg',

    '../../img/3.jpg',

    '../../img/4.jpg'

  ],

  // autoRun:true,

  blankWidth : 12,

  newImgWidth: 18,

  interval:1500,

  duration:200,

  direction:'left',

  startSlide:function(curPage){



  },

  endSlide: function (curPage){



  }

});

}

})

yxxrui.slider.js

var debug = getApp().debug || true;

//此处数据初始化后就不修改了

// var yxxruiSliderData = {

// datas: [],//数据包，必须为数组

// indicateDots: [],

// blankWidth: 12,

// newImgWidth: 18,

// totalWidth:0,

// firstX:0,

// direction:‘left’,

// autorun:true,

// duration:1000,

// interval:2000,

// startSlideCallback:null,

// endSlideCallback:null

// };

//暂时记录一下，经常修改的参数

// var yxxruiSliderX;//当前位移的x

// var yxxruiSliderLock;//滚动锁

// var yxxruiSliderFirstPointX;//第一次触摸时的x坐标

// var yxxruiAutoRunTimer=null;//自动滚动定时器

// var yxxruiSlideTimer= null;//滚动一屏的定时器

// var yxxruiCurPage=1;//当前页面

// var yxxruiSliderLastX;//触摸屏幕时的位移x

function initMySlider(opt) {

if(opt.that==null){

console.log('请传入正确的this');

return;

}

var that = opt.that;

//此处数据初始化后就不修改了

var yxxruiSliderData = {};

//数据包，必须为数组

yxxruiSliderData.datas = opt.datas || [];

//空白处的宽度

yxxruiSliderData.blankWidth = opt.blankWidth==undefined? 12:opt.blankWidth;

//新图片凸出来的宽度

yxxruiSliderData.newImgWidth = opt.newImgWidth == undefined ? 18 : opt.newImgWidth;

//是否自动滚动

yxxruiSliderData.autoRun = opt.autoRun;

//每隔x毫秒滚动一次

yxxruiSliderData.interval = opt.interval || 3000;

//滚动一次需要x秒

yxxruiSliderData.duration = opt.duration || 200;

//滚动方向

yxxruiSliderData.direction = opt.direction || ‘left’;

//滚动开始回调事件

yxxruiSliderData.startSlideCallback = opt.startSlide;

//滚动结束回调事件

yxxruiSliderData.endSlideCallback = opt.endSlide;

var len = yxxruiSliderData.datas.length;

if (len < 1) {

console.log('数据数组必须设置');

return;

}

//轮播图底部小点

yxxruiSliderData.indicateDots = [];

for(var i=0;i<len;i++){

yxxruiSliderData.indicateDots.push(i+1);

}

//处理数据

var fistImg = yxxruiSliderData.datas[0];

var lastImg = yxxruiSliderData.datas[len - 1];

yxxruiSliderData.datas.unshift(lastImg);//将最后一张图片重复放到前边，做无缝滚动

yxxruiSliderData.datas.push(fistImg);//将第一张图片重复放到后边，做无缝滚动

//计算各种参数

var w = wx.getSystemInfoSync().screenWidth;

var kx = yxxruiSliderData.blankWidth;//白色空隙宽度12px

var nx = yxxruiSliderData.newImgWidth;//新图片突出来18px

var ox = kx + nx * 2;//每页中无效的宽度

var fx = w - (ox + nx);

//总宽度

yxxruiSliderData.totalWidth = yxxruiSliderData.datas.length * (w-ox);

yxxruiSliderData.firstX = -fx;

that.setData({

yxxruiSliderData: yxxruiSliderData,

yxxruiSliderX: yxxruiSliderData.firstX,

yxxruiSliderCurPage : 1

});

dealEvent(that);

// if (autoRun) {

// autoRunMyslider(that, interval);

// }

yxxruiSliderData.startSlideCallback && yxxruiSliderData.startSlideCallback(1);

yxxruiSliderData.endSlideCallback && yxxruiSliderData.endSlideCallback(1);

}

function dealEvent(that) {

//触摸开始事件

that.sliderTouchStart = function (opt) {

//解锁

that.data.yxxruiSliderLock = 0;

//让当前滚动暂定

that.data.yxxruiSlideTimer && clearInterval(that.data.yxxruiSlideTimer);

//暂定自动滚动

that.data.yxxruiAutoRunTimer && clearInterval(that.data.yxxruiAutoRunTimer);

that.setData({

  yxxruiSliderLastX : that.data.yxxruiSliderX,

  yxxruiSliderFirstPointX: opt.touches[0].clientX,

  yxxruiSlideTimer:null,

  yxxruiAutoRunTimer:null

});

};

//触摸移动事件

that.sliderTouchMove = function (opt) {

//让轮播图跟着指头滑动

var pointx = opt.touches[0].clientX;

var x = that.data.yxxruiSliderLastX + (pointx - that.data.yxxruiSliderFirstPointX);

that.setData({

  yxxruiSliderX: x

});

};

//触摸结束事件

that.sliderTouchEnd = function (opt) {

//结束后，让轮播图回到该回到的地方

slidePage(that, 0);

//继续开启自动滚动

var mydata = that.data.yxxruiSliderData;

if (mydata.autoRun) {

  autoRunMyslider(that, mydata.interval);

}

};

//触摸取消事件跟触摸结束事件相同

that.sliderTouchCancel = that.sliderTouchEnd;

//记录用户设置的隐藏事件，等待执行完毕之后恢复此事件

var oldHide = that.onHide;

that.onHide =function(){

that.data.yxxruiAutoRunTimer && clearInterval(that.data.yxxruiAutoRunTimer);

that.setData({

  yxxruiAutoRunTimer: null

});

oldHide && oldHide();

};

//记录用户设置的显示事件，等待执行完毕之后恢复此事件

var oldShow = that.onShow;

that.onShow = function(){

var mydata = that.data.yxxruiSliderData;

if (mydata.autoRun) {

  autoRunMyslider(that, mydata.interval);

}

oldShow && oldShow();

}

}

/**

  • 自动开始滚动

*/

function autoRunMyslider(that, t) {

that.data.yxxruiAutoRunTimer && clearInterval(that.data.yxxruiAutoRunTimer);

var autoRunTimer = setInterval(function () {

var dir = that.data.yxxruiSliderData.direction=='right'?1:-1;

slidePage(that, dir);

}, t);

that.setData({

yxxruiAutoRunTimer: autoRunTimer

});

}

//一次性滚动一屏，并且有方向

function slidePage(that,page){

var mydata = that.data.yxxruiSliderData;

var lastx = that.data.yxxruiSliderX - mydata.newImgWidth;

var perScreenX = mydata.totalWidth / mydata.datas.length;

var remain = (perScreenX-Math.abs(lastx%perScreenX))%perScreenX;//看看当前剩余了多少

if(remain>0){

//只需要看看离那边近就跑那边

if(remain<perScreenX/2){

  //说明距离左边近

  slideTo(that, -remain);

}else{

  //说明右边近

  slideTo(that,perScreenX-remain);

}

}else{

slideTo(that, perScreenX * page);

}

}

function slideTo(that, x) {

//锁，如果正在滚动，那么不允许操作

if (that.data.yxxruiSliderLock == 1) return;

that.setData({

yxxruiSliderLock:1

});

var mydata = that.data.yxxruiSliderData;

var i = 0;

var timeStep = 20;//x毫秒刷新一次

var lastx = that.data.yxxruiSliderX;

var perScreenX = mydata.totalWidth / mydata.datas.length;

var step = Math.floor(perScreenX / (mydata.duration / timeStep));

var totalWidth = mydata.totalWidth;

var slideTimer = setInterval(function () {

if(i==0){

  mydata.startSlideCallback && mydata.startSlideCallback(that.data.yxxruiSliderCurPage);

}

if (i >= Math.abs(x)) {

  slideTimer && clearInterval(slideTimer);

  that.setData({

    yxxruiSlideTimer:null

  });

  if (lastx + x >= mydata.newImgWidth) {

    //滚动到边际，处理无缝滚动

    var nowx = mydata.newImgWidth - (totalWidth - perScreenX * 2);

    that.setData({

      yxxruiSliderX: nowx

    });

  }

  if (lastx + x + totalWidth - perScreenX <= mydata.newImgWidth) {

    that.setData({

      yxxruiSliderX: mydata.firstX

    });

  }

  lastx = that.data.yxxruiSliderX;

  var curPage = Math.abs(Math.floor((lastx + perScreenX) / perScreenX))+1;

  that.setData({

    yxxruiSliderCurPage:curPage

  });

  mydata.endSlideCallback && mydata.endSlideCallback(curPage);

  that.setData({

    yxxruiSliderLock: 0

  });

  return;

}

//如果距离 比步数大，那么直接跳步数，不够的话，直接变成最终的答案

if (Math.abs(x) - i > step) {

  i += step;

} else {

  i = Math.abs(x);

}

if (x > 0) {

  that.setData({

    yxxruiSliderX: lastx + i

  });

} else {

  that.setData({

    yxxruiSliderX: lastx - i

  });

}

}, timeStep);

that.setData({

yxxruiSlideTimer: slideTimer

});

}

module.exports = {

initMySlider: initMySlider

};

原文链接：https://www.cnblogs.com/yxxrui/p/wechatDiySlider.html

qq_40994103
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序自定义轮播图(常用四种效果)
09-26
微信小程序常用轮播图，常见四种轮播图，效果和PC的一样，常见的四种，可以自己修改……………………………………………………………………………………………………………………
小程序自定义轮播图
weixin_30780649的博客
12-15 102
话不多说，上图上代码。 wxml <view style="white-space: nowrap;" class="box" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend"> <view class="club" animation="{{animation...
微信小程序之自定义轮播图实例 —— 微信小程序实战系列（3）
2401_84910072的博客
05-17 605
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
微信小程序实现Swiper轮播图效果
10-15
主要介绍了微信小程序实现Swiper轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序3D轮播图
02-28
微信小程序3D轮播图是一种常见且吸引用户的交互设计，尤其适用于展示多个产品或信息时。在微信小程序中，开发者可以利用小程序提供的组件和API来创建这种特效，以提升用户体验。下面将详细介绍如何实现这样的3D轮播...
微信小程序自定义轮播图所有参数可调，有回调函数
04-01
起名就叫做自定义轮播图吧。 为了方便后期使用，起初设计多个参数可调： 1、自动滚动开关 2、滚动一屏所需要的时间 3、两次滚动事件的时间间隔 4、两张图片中间空隙宽度 5、左右两边新突出图片的宽度 6、开始滚动回...
玩转微信小程序 (自定义组件 轮播图)
QuantumYou的博客
01-31 600
自定义组件 在components 文件夹下定义自定义组件 使用组件 在将使用自定义组件的页面中引入 位于index.json
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
10-17
主要介绍了微信小程序非swiper组件实现的自定义伪3D轮播图效果,涉及微信小程序事件响应及元素属性动态操作实现轮播图效果相关技巧与注意事项,需要的朋友可以参考下
微信小程序实现轮播图+菜单
10-23
微信小程序实现轮播图+菜单，非常不错的入门实例，可以看一下。
微信小程序实现3D轮播图效果（非swiper组件）
10-16
主要为大家详细介绍了微信小程序实现3D轮播图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序自定义轮播图滚动样式 自定义组件轮播图的实现
a_靖的博客
12-16 2311
效果图： 实现代码： wxml <view class="card card_b"> <swiper autoplay="{{true}}" interval="4000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper" circular="{...
微信小程序之五（创建轮播图）
han_cui的博客
01-13 2530
轮播图，不外乎俩个要素，跳转链接 和 图片地址 1. 设置数据 我在 pages/test/test.js中添加如下数据 [javascript] view plain copy   //test.js   //获取应用实例   var app = getApp()   Page({     data: {    
微信小程序 自定义轮播图指示点
Acitylion的博客
01-06 485
<view> <swiper class="bgBox" indicator-dots="true" autoplay="true" interval="20000" duration="500" indicator-active-color='#FFFFFF'> <block wx:for="{{background}}" wx:key="*this"> <swiper-item> ...
微信小程序轮播图
weixin_42012181的博客
06-13 1539
微信小程序页面逻辑和app比较相似，虽然看上去很像html，但其实小程序封装了很多页面功能模块，可以直接调用。这里说一下小程序的轮播效果。小程序轮播图用的标签是&lt;swiper&gt;相当于oc的UIScrollerView。小程序还有一个标签是&lt;scroll-view&gt;，相当于oc的UITableView。小程序开发团队是不是和oc有仇？？？先上代码，这个是纵向滚动的文字效果代码...
微信小程序-slider
QEcode的博客
10-02 922
slider
微信小程序----组件之slider
翟浩浩Android专栏
09-07 2906
效果图 项目结构： 核心代码： index.wxml 设置left/right icon 设置step 显示当前value 设置最小/最大值 index.js var pageData = {} for (var i = 1; i < 5; i++)
微信小程序纵向轮播图
最新发布
06-26
微信小程序中的纵向轮播图，也称为竖向滑动轮播组件，通常指的是在竖屏布局下，图片或内容沿着垂直方向进行滚动展示的设计。这种设计在一些信息密集、空间有限的场景中很常见，比如商品详情页、图文资讯列表等。 实现微信小程序纵向轮播图，你可以使用内置的`scroll-view`组件，设置`scroll-y`属性为`true`使其支持垂直滚动，并配合使用`swiper`或者自定义的滚动逻辑来控制图片切换。`wx:for`指令用于遍历数据源，显示不同的图片或内容。 以下是一个简单的示例代码： ```html <view class="vertical-swiper"> <scroll-view scroll-y="true" class="scroll-view"> <block wx:for="{{images}}"> <view class="swiper-item"> <image src="{{item.src}}" /> <!-- 可能包含更多内容 --> </view> </block> </scroll-view> </view> ``` 其中，`images`是一个包含图片URL的数据数组，`item.src`会根据索引动态展示不同的图片。 相关问题： 1. 如何设置`scroll-view`的滚动事件来控制轮播效果？ 2. 如何添加箭头按钮或者手势操作来切换纵向轮播图？ 3. `vertical-swiper`组件是微信小程序提供的官方组件吗？如果不是，如何找到合适的第三方库实现？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值