微信小程序scroll-view(或者其他view) 计算高度 px转rpx有关

本文详细介绍了在微信小程序中如何动态获取设备屏幕尺寸,并根据全局变量设置Swiper控件的高度。通过调整预留高度,确保Swiper在不同设备上都能正确显示。
 wx.getSystemInfo({
      success: function (res) {
        that.globalData.winWidth = res.windowWidth;
        that.globalData.winHeight = res.windowHeight;
      }
    })

 

以上,app.js中 先获取整体高度 赋值给全局变量

<swiper class='swiper' current="{{currentTab}}" duration="300" bindchange="bindChange" style="height:{{winHeight}}px">

以上.wxml代码 style height 赋值 使用方法

 

//定义高度
Page({
  data: {
    winHeight: 0
 },
})

onLoad: function (options) {
 this.setData({
      winHeight: app.globalData.winHeight -                    
                            wx.getSystemInfoSync().screenWidth / 750 * (155)
    })
}

以上 js 是其他控件预留 155rpx情况下

swiper 控件的高度

 

 

转载于:https://www.cnblogs.com/Early-Bird/p/8623934.html

### 微信小程序 `scroll-view` 组件使用教程 #### 一、组件简介 `scroll-view` 是微信小程序提供的用于创建可滚动区域的组件。此组件适用于构建具有上下滑动或左右滑动功能的界面,比如常见的商品列表页面或是新闻资讯类应用中的内容展示区[^1]。 #### 二、属性说明 为了更好地控制滚动行为以及外观样式,`scroll-view` 提供了一系列自定义属性: - **增强模式 (`enhanced`)** 当设置该参数为 true 时,能够解锁更多高级操作选项,例如通过 JavaScript 动态调整位置等。同时只有在此状态下才能正常使用某些特定配置项,像隐藏/显示滚动条(`show-scrollbar`)等功能也依赖于此开关的状态[^2]。 - **方向设定 (`scroll-x`, `scroll-y`)** 可分别指定是否允许水平方向上的移动(`true` 或者 `false`) 和垂直方向上的位移情况。当两者都设为真值,则会形成一个既可以在X轴也可以Y轴自由拖拽的空间;反之如果只开启了其中一个维度,则仅限于对应的方向内活动[^3]。 - **尺寸要求** 要让 `scroll-view` 发挥作用,内部子元素的整体大小应当超出容器本身所限定的最大范围——即宽度超过父级规定的界限就可以触发横向滚屏效果;同理对于高度而言也是如此处理方式来达成竖直方向上的平移目的。 #### 三、示例代码 下面给出一段简单的 HTML 结构配合 CSS 样式的例子,展示了如何利用上述提到的各种特性和参数组合起来制作一个基本可用的小程序页面片段: ```html <template> <!-- 容器 --> <view class="container"> <!-- 水平滚动视图 --> <scroll-view class="horizontal-scroll" scroll-x="true" enhanced="true" show-scrollbar="false"> <block wx:for="{{items}}" wx:key="id"> <view class="item">{{index}}</view> </block> </scroll-view> <!-- 垂直滚动视图 --> <scroll-view class="vertical-scroll" scroll-y="true" enhanced="true" bindscrolltolower="loadMoreData"> <block wx:for="{{listItems}}" wx:key="uniqueId"> <view class="content-item">{{itemText}}</view> </block> </scroll-view> </view> </template> ``` ```css /* 设置整体布局 */ .container { display: flex; flex-direction: column; } .horizontal-scroll, .vertical-scroll{ border: solid 1px #ccc; margin-bottom: 10rpx; } .item,.content-item{ padding: 20rpx; text-align:center; } ``` ```javascript Page({ data:{ items:[...Array(8).keys()],//模拟数据源 listItems:[ { uniqueId:'a', itemText:"Item A"}, { uniqueId:'b', itemText:"Item B"} // 更多项目... ] }, loadMoreData(){ console.log('触底加载'); // 实现分页逻辑或其他异步请求新数据的操作 } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值