admin 管理员组

文章数量: 887021

效果图：

index.wxml:

<view class="mask-movable">
  <image style="position:absolute;z-index:-1;height: 600rpx; width: 492rpx;" mode='scaleToFill' src='{{img2}}'></image> 
  <movable-area wx:if="{{hiddenimg}}" style="height: 160vh; width: 260vw; background: transparent;">
    <movable-view style="height: 600rpx; width: 492rpx;background: transparent;" x="{{x}}" y="{{y}}" direction="all" bindchange="moveimg">
    <image bindtouchend="touchendimg" bindtouchcancel='touchendimg'  style="width:100%;height:100%;" mode='scaleToFill' src='{{img1}}'></image>
    </movable-view>
  </movable-area>
</view>

index.wxss

page{
  width:100%;
  height:100%;
  overflow:hidden;
}
.mask-movable{
  width: 492rpx;
  height: 600rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

index.js

var prex = 0;
const app = getApp()
Page({
  data: {
    img1: "http://img5.imgtn.bdimg/it/u=166380803,562422762&fm=26&gp=0.jpg",
    img2: "http://img4.imgtn.bdimg/it/u=3658087743,1028297051&fm=26&gp=0.jpg",
    x: 0,
    y: 0,
    hiddenimg: true
  },
  moveimg: function (e) {
    var that = this;
    prex = e.detail.x;
    console.log('moveimg', prex)
  },
  touchendimg: function (e) {
    console.log('touchendimg', prex)
    var that = this;
    if (prex < -200 || prex > 200) {
      that.setData({
        hiddenimg: false,
      }, () => {
        setTimeout(function () {
          that.setData({
            hiddenimg: true,
            img1: that.data.img2
          })
        }, 300)
      })
    } else {
      setTimeout(function () {
        that.setData({
          x: 0,
          y: 0
        })
      }, 300)
    }
  },
})

 

本文标签： 拖动 下一张 手指 程序 微信小

版权声明：本文标题：微信小程序手指拖动切换下一张 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1726434236h959909.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。