zoukankan      html  css  js  c++  java
  • 微信小程序之视图容器movable-view实现拖拽功能

    • 本文简单使用视图容器movable-area和movable-view实现了简单的拖拽功能。
    • 参考文档:
      movable-area
      movable-view

    实现效果:

    代码:

    1. wxml
        <movable-area class="movable-area">
          <!-- 可以任意拖拽 -->
          <movable-view class="movable-view"
                        direction="all"
                        scale="true">
            <image class="movable-img" src="/images/aixin-red.png" bindtap="onRed"></image>
          </movable-view>
          <!-- 只能垂直拖拽 -->
          <movable-view class="movable-view aixin-blue"
                        direction="vertical"
                        scale="true">
            <image class="movable-img" src="/images/aixin-blue.png" bindtap="onBlue"></image>
          </movable-view>
        </movable-area>
    
    1. wxss
        page{
          height: 100%;
        }
        .movable-area{
          height:100%;
           100%;
          background: pink;
        }
        .movable-view{
           100rpx;
          height: 100rpx;
        }
        .aixin-blue{
          margin-top:200rpx;
        }
        .movable-img{
           100rpx;
          height: 100rpx;
        }
    
    1. javascript
        Page({
          data: {
          },
          //点击红色爱心响应事件
          onRed(){
            wx.showToast({
              title: '点击了红色爱心',
              icon:"none"
            })
          },
          //点击蓝色爱心响应事件
          onBlue() {
            wx.showToast({
              title: '点击了蓝色爱心',
              icon: "none"
            })
          },
        })
    
  • 相关阅读:
    Java工具类——UUIDUtils
    Python中的split()函数的用法
    学习笔记
    hdu 1558 线段相交+并查集
    hdu 4609 FFT
    hdu1402 FFT入门
    多项式乘法快速算法
    FFT
    GDUT校赛
    light oj 1236 分解质因数
  • 原文地址:https://www.cnblogs.com/xunxian/p/12950406.html
Copyright © 2011-2022 走看看