微信小程序swiper,修改滑动动画时长和点击进去默认显示的页面

点击不同的图片,进入swiper页面,显示到对应的item上
我使用了current属性
第一个页面向第二个页面传递,对应的id

<image class="cxyr-icon {{big_icon == 1?'big':''}}" data-id="1" src="{{chen_icon}}" bindtap="toDetail"></image>
toDetail: function (e) {
    var id = e.currentTarget.dataset.id;
    wx.navigateTo({
      url: '../part_swiper/part_swiper?index='+id,
    })
  }

第二个页面接收传递过来的id,并赋值给current,第一次跳转到对应的item时,滑动动画时长为0

onLoad: function (options) {
    let index_current = options.index-1;
    console.log(index_current)
    this.setData({index_current: index_current,duration:0});
  },
<swiper class="swiper-bottom" style="height: 100%;" current="{{index_current}} " duration="{{duration}}" indicator-dots="true" indicator-color="rgba(255,255,255,.3)" indicator-active-color="#FFF"> 
<swiper>

在swiper页面,正常滑动时,滑动动画设置为正常的默认500毫秒

onReady: function () {
    this.setData({duration:500});
  },
### 微信小程序 Swiper 实现滑动标签栏 #### 一、Swiper 基础介绍 `<swiper>` 是微信小程序中的一个重要组件,主要用于创建轮播图效果。然而,除了常见的图片轮播外,该组件同样适用于构建滑动标签栏的效果[^2]。 #### 二、核心属性配置 为了实现滑动标签栏的功能,需特别关注以下几个关键属性: - **indicator-dots**: 设置为 `false` 可隐藏默认的小圆点指示器; - **circular**: 开启循环模式使得首尾相连形成无限滚动; - **current**: 控制当前选中的索引位置,默认值为0; - **duration**: 定义每次切换的时间长度(单位毫秒),通常设为较短时间如300ms; - **interval**: 如果启用自动播放,则定义两次切换之间的间隔时长;对于静态标签页来说一般不需要此功能; - **vertical**: 改变滑动方向至垂直状态,大多数情况下保持水平即可满足需求。 #### 三、HTML 结构设计 下面是一个简单的 HTML 片段用来表示具有三个选项卡的滑动菜单结构: ```html <view class="tabs"> <swiper indicator-dots="{{false}}" circular="{{true}}" current="{{currentIndex}}" bindchange="handleTabChange"> <!-- Tab Item --> <block wx:for="{{tabItems}}" wx:key="id"> <swiper-item> <view>{{item.title}}</view> </swiper-item> </block> </swiper> <!-- Content Area Corresponding To Selected Tab --> </view> ``` 此处利用了 `<block>` 标签配合 `wx:for` 属性实现了动态渲染多个相同模板的目的,而每个具体的 tab item 则由 `<swiper-item>` 承载[^1]。 #### 四、JavaScript 逻辑编写 接下来,在对应的 JS 文件里初始化页面数据并监听 swipper 的 change 事件以便更新当前激活项: ```javascript Page({ data: { currentIndex: 0, tabItems: [ { id: 'home', title: '首页' }, { id: 'category', title: '分类' }, { id: 'profile', title: '个人中心' } ] }, handleTabChange(event){ const newIndex = event.detail.current; // 更新data中保存的状态变量 this.setData({ currentIndex: newIndex }); // 还可以根据newIndex加载不同内容... } }) ``` 这段代码片段展示了如何通过 setData 方法同步界面状态的变化,并且可以在回调函数内部进一步扩展业务逻辑,比如根据新的索引加载相应的内容区域[^5]。 #### 五、样式美化建议 最后不要忘记给这些元素加上合适的 CSS 样式使其看起来更美观友好。可以通过调整字体大小、颜色以及背景色等方式增强用户体验感。同时也可以考虑加入一些过渡动画让整个交互过程更加流畅自然。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值