• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

微信小程序 movable-view组件应用:可拖动悬浮框_返回首页

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

 

1. movable-view组件具体内容可参考官网:微信官方文档

2. demo参考:https://github.com/ChinaFanny/YFWeappMovableView

 

 

运行效果

 

 

核心代码

 

<!--components/movable-custom-view/movable-custom-view.wxml-->
  <movable-area class="custom-class" style="pointer-events: none;height: 100%;width: 100%;left:0px;top:0px;position:fixed;">
    <movable-view wx:if="{{show}}" direction="all" x="{{moveViewX}}" y="{{moveViewY}}" animation="{{false}}" style="pointer-events: auto; width: 40px;height:56px;z-index: 999;" bindtap="onHome">
      <view class="img-view">
        <image src=\'/images/home.png\' class="home-img"></image>
        <view class="home-txt">返回首页</view>
      </view>
    </movable-view>
  </movable-area>

 注意:movable-area的position:fixed;是关键

 

// components/movable-custom-view/movable-custom-view.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    show: {
      type: Boolean,
      value: false
    },
    moveViewX: {
      type: Number,
      value: 0
    },
    moveViewY: {
      type: Number,
      value: 0
    }
  },

  externalClasses: [\'custom-class\'],
  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    onHome:function(){
      wx.reLaunch({
        url: \'/pages/index/index\',
        success: function (res) { },
        fail: function (res) { },
        complete: function (res) { },
      })
    }
  }
})

 

<!--pages/next/next.wxml-->
<view class="container">
  <image src="{{imgSrc}}" mode="widthFix" bindtap="onPreviewImage" data-value="{{imgSrc}}"></image>
  <view>路飞</view>
  <view>全名:蒙奇·D·路飞</view>
  <view>阳光号船长</view>
</view>
<movable-custom-view show="{{true}}" moveViewX="{{moveViewLeft}}" moveViewY="{{moveViewTop}}">
</movable-custom-view>

 

// pages/next/next.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    sysWidth: wx.getSystemInfoSync().windowWidth, //屏幕宽度
    sysHeight: wx.getSystemInfoSync().windowHeight, //屏幕高度
    imgSrc: \'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569414294423&di=1ccf0e0e83d9ecf16453de12b36503da&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201801%2F26%2F20180126224524_xrrdq.thumb.700_0.jpg\'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var sysWidth = this.data.sysWidth
    var sysHeight = this.data.sysHeight
    this.setData({
      sysHeight: sysHeight,
      moveViewLeft: sysWidth - 50,
      moveViewTop: sysHeight - 100,
    });
  },

  onPreviewImage: function(e) {
    var imgUrl = e.currentTarget.dataset.value
    wx.previewImage({
      current: imgUrl,
      urls: [imgUrl],
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
})

 

 

 

demo参考:https://github.com/ChinaFanny/YFWeappMovableView


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序-for指令发布时间:2022-07-18
下一篇:
微信小程序:新功能WXS解读(2017.08.30新增)发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap