首页 > 编程语言 >微信小程序swiper添加左右切换按钮

微信小程序swiper添加左右切换按钮

时间:2023-05-05 11:34:06浏览次数:34  
标签:index swiperCurrent 微信 添加 按钮 data swiper

项目中需要使用swiper,需要添加左右切换的按钮,代码如下:
wxml

<view>
  <block wx:if="{{list.length>1}}">
    <van-icon bindtap="nextSwiper" name="arrow" class="icon-right" color="#c09d75"/>
    <van-icon bindtap="prevSwiper" name="arrow-left" class="icon-left" color="#c09d75"/>
  </block>
  <swiper class="swiper" id="swiper" circular="{{true}}" current="{{swiperCurrent}}" interval="3000" duration="500">
    <swiper-item wx:for="{{list}}" wx:key="index">{{item}}</swiper-item>
  </swiper>
</view>

js

// 上一页
prevSwiper() {
  const index = this.data.swiperCurrent - 1 < 0 ? 2 : this.data.swiperCurrent - 1;
  this.setData({
    swiperCurrent: index,
  });
},
// 下一页
nextSwiper() {
  const index = this.data.swiperCurrent + 1 > 2 ? 0 : this.data.swiperCurrent + 1;
  this.setData({
    swiperCurrent: index,
  });
}

标签:index,swiperCurrent,微信,添加,按钮,data,swiper
From: https://www.cnblogs.com/ZerlinM/p/17373651.html

相关文章

  • 微信支付,添加微信支付证书发生异常,提示error:23076071:PKCS12 routines:PKCS12_parse:
    1BaseException2Message:error:23076071:PKCS12routines:PKCS12_parse:macverifyfailure3StackTrace:4InnerException:error:23076071:PKCS12routines:PKCS12_parse:macverifyfailure5InnerException.StackTrace:atInternal.Cryptogr......
  • 微信小程序打开腾讯会议小程序并入会
    wx.navigateToMiniProgram({appId:'wx33fd6cdc62520063',//要跳转的微信小程序appidpath:'pages/sub-preMeeting/join-meeting/join-meeting?scene=m%3Dxxxxxxxxx',//要跳转到的页面路径success(){},fail(){}});其中xxxxxxxxx......
  • QQ和微信amr转mp3
    微信和QQ导出的amr音频文件,大家可以发现用一般播放器都是无法正常播放的。原因是虽然音频格式是amr,但却不是标准amr编码的,而是采用了Silkv3音频编码,导致很多播放器都播放不了。本工具可以对此类amr进行单个文件快速播放或批量格式转换成MP3。下载:链接:https://pan.baidu.com/s......
  • uniapp 微信小程序生成二维码
     <viewclass="qr-box"><canvascanvas-id="qrcode"style="width:340rpx;height:340rpx;;margin:0auto;"/></view> <script>importuQRCodefrom'@/common/uqrcode.js'//引入uqrcod......
  • Odoo14 Tree视图创建按钮后面增加按钮
    1.继承ListView.buttons,在其按钮后面增加我们自定义的按钮,通过widget的一些属性去判断按钮的显示<templatesid="list_import_shipping_button_create"xml:space="preserve"><tt-extend="ListView.buttons"><tt-jquery="div.o_list_buttons&......
  • 微信小程序扫码登录
    实现微信小程序扫码登录先上效果实现流程图流程图解释用户访问网页打开扫码登录加载携带唯一登录标识小程序码用户扫码打开,同步状态为已扫码网页端轮询请求状态是否为已授权登录登录成功,获取Token跳转系统登录失败,可刷新码重新扫码小程序码选择小程序文档这里我们......
  • uniapp中swiper设置自适应高度
    原文链接:https://www.jianshu.com/p/6a2fa0f1f86euniapp中如何设置swiper的高度自适应的问题解决uniapp中的swiper组件可以用来做滑动切屏的,但是有个不好的地方,就是必须设置一个固定的高度,对于在每一个swiper-item里的内容可能不一定的情况,就会造成内部的内容不能自动撑开,......
  • 微信公众号网页登录,获取用户信息
    0、参考wechat登录前端代码.zip下载后端java代码下载1、接口信息配置请填写接口配置信息,此信息需要你有自己的服务器资源,填写的URL需要正确响应微信发送的Token验证URL=http://自己的域名/rest/WeChat/verifyToken=123456792、JS接口安全域名域名=自己的域名3、网页......
  • 可设置圆角背景边框的按钮, 通过调节色彩明度自动计算按下(pressed)状态颜色
    可设置圆角背景边框的的按钮,通过调节色彩明度自动计算按下(pressed)状态颜色使用:xml<?xmlversion="1.0"encoding="UTF-8"?><LinearLayoutandroid:paddingTop="20dp"android:orientation="vertical"android:layout_height=&quo......
  • 微信支付——介入指引
    一、业务平台介绍:1.微信公众平台微信公众平台是微信公众账号申请入口和管理后台。商户可以在公众平台提交基本资料、业务资料、财务资料申请开通微信支付功能。2.微信开放平台微信开放平台是商户APP接入微信支付开放接口的申请入口,通过此平台可申请微信APP支付。3.微信商户平台......