uniapp实现微信小程序横屏适配问题demo效果(整理)

简介: uniapp实现微信小程序横屏适配问题demo效果(整理)


使用VMIN进行布局

先了解css3的两个属性vmax和vmin

vmax 相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax
vmin 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin

竖屏布局的时候,750rpx就是竖屏布局屏幕的宽度,vmin不管横竖屏的情况下,100vmin都是手机屏幕的宽度,所以rpx与vmin之间有一个换算的关系:x rpx=( x * 100 / 750)vmin。

也就是说: 75rpx转化为vmin就是 75 * 100/750=10vmin

所以我们将rpx转化成vmin就可以正常的进行横屏的开发。


主要:

@function tovmin(KaTeX parse error: Expected '}', got 'EOF' at end of input: rpx) { //rpx为需要转换的字号

@return #{$rpx * 100 / 750}vmin;

}

<template>
  <view class="clanHall" style="background-image: url(https://image.zrms.com.cn/1683537773246xianghuo.png);">
    <view class="videoTop row-me row-center">
      <image src="../static/back.png" mode="aspectFit" class="returnImg" @click="goClick"></image>
      <view class="row-me row-center broadcast">
        <image src="../static/icon_laba.png" mode="aspectFit" class="margin-right10 horn"></image>
        <swiper circular="true" vertical="true" autoplay="true" interval="3000" duration="1000"
          class="margin-right30 swiperBox">
          <swiper-item v-for="(item,index) in noticeList" :key="index"
            class="row-me row-center swiperItem colorfff">
            <view class="margin-left10 txt1">{{item.name}}</view>于<view class="txt2">{{item.day}}
            </view>去世,送上属于你的思念。
          </swiper-item>
        </swiper>
      </view>
    </view>
    <view class="leftBox">
      <view class="row-me row-center viewBox margin-bottom20" @click="tabLeft(1)">
        <image src="../static/btn_quanjing.png" mode="aspectFit" class="img"></image>
        <view class="font-bold colorfff leftTxt">全景</view>
      </view>
      <view class="row-me row-center viewBox margin-bottom20" @click="tabLeft(2)">
        <image src="../static/btn_sc.png" mode="aspectFit" class="img">
        </image>
        <view class="font-bold colorfff leftTxt">商城</view>
      </view>
      <view class="row-me row-center viewBox margin-bottom20" @click="tabLeft(3)">
        <image src="../static/btn_jcxx.png" mode="aspectFit" class="img"></image>
        <view class="font-bold colorfff leftTxt">家祠信息</view>
      </view>
      <view class="row-me row-center viewBox" @click="tabLeft(4)">
        <image src="../static/btn_jcys.png" mode="aspectFit" class="img"></image>
        <view class="font-bold colorfff leftTxt">家祠议事</view>
      </view>
    </view>
    <view class="rightBottom row-me row-center">
      <view class="viewBox" @click="tabRightbottom(1)">留言</view>
      <view class="viewBox" @click="tabRightbottom(2)">相册</view>
    </view>
  </view>
</template>
<script>
  export default {
    components: {
    },
    data() {
      return {
        noticeList: [ //公告栏播报
          {
            name: '杨树林',
            day: '2020年3月29日',
          },
          {
            name: '杨树林01',
            day: '2020年3月29日',
          },
          {
            name: '杨树林02',
            day: '2020年3月29日',
          },
        ],
      }
    },
    // 侦听器
    watch: {
    },
    // 计算属性
    computed: {
    },
    //组件创建
    created() {
    },
    // 页面加载
    onLoad(e) {
    },
    // 页面显示
    onShow() {
    },
    // 方法
    methods: {
      goClick() {
        this.$.back();
      },
      tabLeft(index) {
        if (index == 1) {
          this.$.toast('暂无开通,敬请期待!');
        } else if (index == 2) {
          this.$.open("/ancestralHall/store/indexList");
        } else if (index == 3) {
          this.$.toast('暂无开通,敬请期待!');
        } else if (index == 4) {
          this.$.toast('暂无开通,敬请期待!');
        }
      },
      tabRightbottom(index) {
        if (index == 1) {
          this.$.toast('暂无开通,敬请期待!');
        } else if (index == 2) {
          this.$.open("/myAncestralHall/myAncestralHallPage/photo");
        }
      },
    },
    // 页面隐藏
    onHide() {
    },
    // 页面卸载
    onUnload() {
    },
    // 触发下拉刷新
    onPullDownRefresh() {
    },
    // 页面上拉触底事件的处理函数
    onReachBottom() {
    },
  }
</script>
<style lang="scss" scoped>
  @function tovmin($rpx) {
    //$rpx为需要转换的字号
    @return #{$rpx * 100 / 750}vmin;
  }
  // width: tovmin(750);
  .clanHall {
    height: 100vh;
    overflow: auto;
    background-color: #2A3143;
    background-size: 100% 100%;
    .videoTop {
      // height: 88rpx;
      height: tovmin(88);
      .returnImg {
        // width: 123rpx;
        // height: 34rpx;
        // margin-left: 60rpx;
        // margin-right: 46rpx;
        width: tovmin(123);
        height: tovmin(34);
        margin-left: tovmin(60);
        margin-right: tovmin(46);
      }
      .broadcast {
        flex: 1;
        // height: 80rpx;
        height: tovmin(80);
        border-radius: 20rpx;
        .horn {
          // width: 30rpx;
          // height: 30rpx;
          width: tovmin(30);
          height: tovmin(30);
        }
        .swiperBox {
          width: 100%;
          // height: 80rpx;
          height: tovmin(80);
          .horn {
            // width: 30rpx;
            // height: 30rpx;
            width: tovmin(30);
            height: tovmin(30);
          }
          .swiperItem {
            font-size: tovmin(24);
            .txt1 {
              color: #DBB081;
            }
            .txt2 {
              color: #DBB081;
            }
          }
        }
      }
    }
    .leftBox {
      position: fixed;
      // top: 118rpx;
      // left: 90rpx;
      // width: 200rpx;
      width: tovmin(200);
      top: tovmin(118);
      left: tovmin(90);
      .viewBox {
        // width: 200rpx;
        // height: 80rpx;
        width: tovmin(200);
        height: tovmin(80);
        background: rgba(0, 0, 0, 0.5);
        border-radius: 50rpx;
      }
      .img {
        // width: 44rpx;
        // height: 44rpx;
        // margin-left: 28rpx;
        // margin-right: 12rpx;
        width: tovmin(44);
        height: tovmin(44);
        margin-left: tovmin(28);
        margin-right: tovmin(12);
      }
      .leftTxt {
        font-size: tovmin(24);
      }
    }
    .rightBottom {
      position: fixed;
      // bottom: 58rpx;
      // right: 40rpx;
      bottom: tovmin(58);
      right: tovmin(40);
      .viewBox {
        // width: 182rpx;
        // height: 70rpx;
        // line-height: 70rpx;
        background-image: url('../static/bg_liuyan.png');
        background-size: 100% 100%;
        // font-size: 26rpx;
        font-weight: bold;
        color: #FFFFFF;
        text-align: center;
        // margin-left: 27rpx;
        width: tovmin(182);
        height: tovmin(70);
        line-height: tovmin(70);
        font-size: tovmin(26);
        margin-left: tovmin(27);
      }
    }
  }
</style>
相关文章
|
5天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
5天前
|
存储 小程序 搜索推荐
打造无缝社交体验:多平台适配,开启线上线下陪玩系统小程序社交新时代
通过实施以上策略和行动计划,可以打造出一个无缝社交体验的多平台陪玩社交系统,为用户提供更加便捷、高效、有趣的社交体验,开启线上线下陪玩系统源码社交的新时代。
37 11
|
4天前
|
小程序 前端开发 关系型数据库
uniapp跨平台框架,陪玩系统并发性能测试,小程序源码搭建开发解析
多功能一体游戏陪练、语音陪玩系统的开发涉及前期准备、技术选型、系统设计与开发及测试优化。首先,通过目标用户分析和竞品分析明确功能需求,如注册登录、预约匹配、实时语音等。技术选型上,前端采用Uni-app支持多端开发,后端选用PHP框架确保稳定性能,数据库使用MySQL保证数据一致性。系统设计阶段注重UI/UX设计和前后端开发,集成WebSocket实现语音聊天。最后,通过功能、性能和用户体验测试,确保系统的稳定性和用户满意度。
|
11天前
|
移动开发 开发框架 小程序
轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地
婚恋交友系统涵盖在线交友、线下活动、专业服务、社交娱乐等,满足用户多样化需求。系统设计简洁易用,提供实名认证、多注册方式及安全保护,确保用户隐私和数据安全。功能丰富,支持图文展示、筛选匹配、聊天互动、虚拟礼物等,提升互动趣味性。平台可分类管理用户、审核信息、智能推荐,优化用户体验。基于TP6+Uni-app框架,实现跨平台同步,支持二次开发,适应不同市场需求。 [了解更多](https://gitee.com/multi-customer-software/jy)
|
28天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
24天前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
8天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
12 0
|
2月前
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
2月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
68 0
在线课堂+工具组件小程序uniapp移动端源码
|
3月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
512 3

热门文章

最新文章