WXS响应事件

最新推荐文章于 2024-03-25 14:32:58 发布

jrongweb

最新推荐文章于 2024-03-25 14:32:58 发布

阅读量352

点赞数 2

分类专栏：微信小程序 wxs 文章标签：小程序

本文链接：https://blog.csdn.net/o11111123456l/article/details/120606360

版权

微信小程序同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

wxs

1 篇文章 0 订阅

订阅专栏

WXS响应事件，无js处理

扫描下面小程序码可直接看效果

<!--index.wxml-->
<wxs module="test1" src="./index.wxs"></wxs>
<view class="">
  <view>无js处理事件</view>
  <movable-area class="bar1 bar">
      <movable-view class="per didi1" data-myClass="didi2" direction="horizontal" animation="{{false}}" bindchange="{{test1.move1}}"></movable-view>
    </movable-area>
    <view class="bar2 bar" >
      <view class="per didi2"></view>
    </view>
</view>


.bar{
  position: absolute;
  top: 25rpx;
  left: 75rpx;
  width: 600rpx;
  height: 50rpx;
  background-color: grey;
  border-radius: 25rpx;
}
.per{
  position: absolute;
  width: 50rpx;
  height: 50rpx;
  background-color: red;
  border-radius: 50%;
}
.btn{
  background-color: red;
  padding: 5rpx;
  width: 50rpx;
}

.bar1{
  top: 250rpx;
}
.bar2{
  top: 350rpx;
}

wxs文件命名为 index.wxs


var move1=function(e,ownerInstance){
  var myClass=e.target.dataset.myclass;
  var instance = ownerInstance.selectComponent('.'+myClass) // 返回组件的实例
  instance.setStyle({
    "left": e.detail.x+"px", 
    "background":"#FF0"
  })
}
module.exports = {
  move1:move1
};

效果图如下：