微信小程序竖屏横屏切换展示效果

最新推荐文章于 2026-03-29 10:34:45 发布

原创

最新推荐文章于 2026-03-29 10:34:45 发布 · 4.9k 阅读

标签

#微信小程序竖屏 #微信小程序横屏 #微信小程序拖拽元素

收录于

竖屏横屏切换

竖屏
- 效果
- 代码
横屏
- 效果
- 代码
总结

竖屏

效果

在这里插入图片描述

代码

<!-- index.html -->
<view class="rect submit_btn flexbox_auto" id="btn" style="top:{
      
      {
      
      top}}px;left:{
      
      {
      
      left}}px;" bindtap="onSubmit" bindtouchmove="onTouchmove" bindtouchstart="onTouchStart">
  提交
</view>

// index.js
let startX = 0 // 获取手指初始坐标
let startY = 0
let x = 0 // 获得盒子原来的位置
let y = 0
let cSys = {
   
   } // 当前系统配置
let btnsRect = [] // 拖拽元素宽高
let defaultH = 100 // 缺省高度
let defaultW = 100 // 缺省宽度

Component({
   
   
  lifetimes: {
   
   
    ready: function () {
   
   
      const query = wx.createSelectorQuery().in(this)
      query.select('#btn').boundingClientRect(res => {
   
   
        cSys = wx.getSystemInfoSync()
        btnsRect = [res.width, res.height]
        const top = Math.floor(cSys.windowHeight - btnsRect[1] - defaultH)
        const left = Math.floor(cSys.windowWidth - btnsRect[0] - defaultW)
        this