小程序_横向拽动_微信小程序横轴拖拽进度-CSDN博客

本文链接：https://blog.csdn.net/qq_41408081/article/details/128896603

文章介绍了如何将swiper组件改造成用于横向选择的功能，特别是在热敷温度设置的应用中。通过监听滑动事件并限制时间间隔来实现选择，同时展示了相关的JavaScript代码和微信小程序(wxml,wxss)的结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

序：由于UI功能的需求，需要横向拽动选择，选择使用swiper滑块视图容器，这个一般用作轮播图使用，我这是为了方便个人使用而改造的，如果有好的建议，请在告知一下，感谢！

图片预览

xxx.js

var heatTime = 0; // 热敷温度
Page({
// 页面的初始数据
data: {
  heatArr: ['关','01','02','03','04','05','06','07','08','09','10'], // 热敷
  heatNum: 0,
},
// 热敷设置
heatChange(e){
  let num = e.detail.current;
  let t = e.timeStamp - heatTime;
  if(t > 500){
    heatTime = e.timeStamp;
    this.setData({
      heatNum: num,
    })
    console.log('热敷设置',num);
  } 
},
})

xxx.wxml

<view class="item_tle">热敷</view>
<swiper class="item_swiper_flex" circular="true" bindchange="heatChange" current='{{heatNum}}' easing-function="linear" previous-margin="95px" next-margin="95px">
  <block wx:for="{{heatArr}}" wx:key="index">
    <swiper-item>
      <view class="item_item {{heatNum === index ? 'item_item_active' : ''}}">{{item}}</view>
    </swiper-item>
  </block>
</swiper>

xxx.wxss（聚焦背景改为浅蓝色）

/* xxx.wxss */
.item_tle{text-align: center;font-size:24px;font-weight: 500;color:#190933;}
.item_swiper_flex{width:240px;height:32px;display: inline-flex;justify-content: space-between;margin: 5px auto 0;}
.item_item{display: inline-flex;width:100%;height:32px;justify-content: center;align-items: center;color: #A89F9B;font-size: 20px;font-family: 'sans-serif';transition: all .3s ease-in-out;}
.item_item_active{color: #190933;background: linear-gradient(90deg, rgba(255, 244, 244, 0) 0%, #8eaef1 53.12%, rgba(255, 244, 244, 0) 100%);font-weight: bold;}

核心功能代码都在上面了，只是有部分地方需要根据情况区微调一下！