1. movable-view组件具体内容可参考官网:微信官方文档
运行效果
核心代码
<!--components/movable-custom-view/movable-custom-view.wxml--> <view class="move-view"> <movable-area class="custom-class" style="pointer-events: none;height: {{moveViewHeight}};width: 100%;left:0px;top:0px;"> <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> <slot></slot> </movable-area> </view>
// components/movable-custom-view/movable-custom-view.js Component({ /** * 组件的属性列表 */ properties: { show: { type: Boolean, value: false }, moveViewHeight: { type: String, value: 0 }, 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"> <view class="movable-view"> <movable-custom-view show="{{true}}" moveViewHeight="100%" moveViewX="{{moveViewLeft}}" moveViewY="{{moveViewTop}}"> <image src="{{imgSrc}}" mode="widthFix"></image> </movable-custom-view> </view> </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({ // 获取屏幕宽度 moveViewLeft: sysWidth - 50, moveViewTop: sysHeight - 100, }); }, })