微信小程序拖动滑块验证

最新推荐文章于 2025-07-15 10:17:30 发布

原创

最新推荐文章于 2025-07-15 10:17:30 发布 · 6k 阅读

7 ·

CC 4.0 BY-SA版权

index.wxml

  <movable-area class="content" style="width:{
  
  {area_width}}%">
    拖动滑块验证
    <movable-view class='box' style='width:{
  
  {box_width}}rpx' friction="{
  
  {100}}" direction="horizontal" x="{
  
  {x}}" damping="{
  
  {500}}" bindchange="drag" bindtouchend="dragOver">
      <view class='movable-icon'></view>
    </movable-view>
  </movable-area>

index.wxss

.content{
  margin: 0 auto;
  margin-top: 200rpx;
  height: 90rpx;
  background: #ededed;
  color: #666;
  border-radius: 10px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:16px;

}
.box{
  /* width: 120rpx; */
  height: 90rpx;
  background-color: #fc5b13;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.movable-icon{
  width: 60rpx;
  height: 60rpx;
  background: url(data:image/png;base64,iVBORw0KGgoAAAAN