微信小程序学习：（五）swiper塌陷问题解决

github地址： https://github.com/leoricding/-

(一)问题分析

需求：实现tab切换，内容切换；内容切换，tab也切换。

困难：实现的过程中，发现swiper-item无法撑开swiper

原因分析：小程序中，swiper-item是脱离文档流的，而swiper是固定高度，所以会出现无法撑开的问题。

解决方案：js动态计算swiper的高度。在swiper-item中填充srcoll-view，而srcoll-view是可以上下滚动的。所以，swiper高度=小程序可用高度-swiper意外其他元素的高度。

（二）不罗嗦直接上代码

<!--pages/lessionDetail/lessionDetail.wxml-->
<!-- 引用模板 -->
<import src="/pages/template/teacher/teacher.wxml" /><view class="container"><!-- 课程图片 --><view class="lession-img-container"><image class="lession-img" src="{{listData[index].carousel}}"></image></view><!-- tab切换标签 --><view class="tab-nav-container"><block wx:for="{{tabNavName}}" wx:key="{{index}}"><view class="tab-nav {{currentSelected==index?'selected':''}}"bindtap="selectTab" data-index="{{index}}"><text>{{item}}</text></view></block></view><!-- tab内容容器 --><view class="tab-content-container"><swiper  style="height: {{clientHeight?clientHeight+'px':'auto'}}"                 class="swiper"current="{{currentSelected}}"bindchange="changeTab"><swiper-item class="swiper-item"><scroll-view scroll-y="{{true}}" style="height: {{clientHeight?clientHeight+'px':'auto'}}" bindscrolltolower="scrollbot"><view class="swiper-item-content-container"><view class="lession-name"><text class="lession-name-text">{{listData[index].lessionName}}</text><view><text class="lession-name-detail">免费 订阅123 最近在学213 好评98%</text></view></view><!-- 老师介绍 --><view class="teacher-introduce"><text>老师介绍</text><template is="teacher" data="{{...listData[index]}}" /></view><!-- 课程介绍 --><view class="lession-detail"><text>课程介绍</text><view><text>{{listData[index].lessionDescription}}</text></view></view></view></scroll-view><view class="lession-buy-container"><view class="lession-buy"><text>￥{{listData[index].lessionPrice}}购买</text></view></view></swiper-item><swiper-item><text>这是课程目录</text></swiper-item><swiper-item><text>这是相关课程</text></swiper-item></swiper></view>
</view>

/* pages/lessionDetail/lessionDetail.wxss */
/* 引入模板样式 */
@import "/pages/template/teacher/teacher.wxss"
.container{display: flex;flex-direction: column;align-items: center;padding: 0;height: 100%;width: 100%;
}
/* 最上层课程图片 */
.lession-img-container{height: 400rpx;width: 100%;
}
.lession-img{height: 400rpx;width: 100%;
}/* tab切换 */
.tab-nav-container{width:100%;height: 60rpx;display: flex;flex-direction: row;justify-content: center;
}
.tab-nav{width: 33.3%;height: 100%;border-bottom: grey solid 1rpx;display: flex;flex-direction: row;justify-content: center;align-content: center;line-height: 60rpx;}
/* tab被选中时的样式 */
.tab-nav-container .selected{color:cyan;border-bottom:cyan solid 2rpx;
}
/* 这是tab切换对应的内容容器 */
.tab-content-container{width: 100%;
}/* 单个滑块容器 */
.swiper-item-content-container{display: flex;flex-direction: column;justify-content: center;
}/* 课堂名称栏 */
.lession-name{width: 100%;border-bottom: grey solid 1rpx;padding:20rpx;box-sizing: border-box;
}
.lession-name-text{font-size: 1.2rem;
}
.lession-name-detail{font-size: 0.6rem;color: grey;
}
/* 老师介绍栏 */
.teacher-introduce{height: 100%;padding: 20rpx;border-bottom: grey solid 1rpx;
}/* 课程介绍 */
.lession-detail{padding: 20rpx;/* border-bottom: grey solid 1rpx; */
}/* 底部购买课程 */
.lession-buy-container{position: absolute;bottom: 0;width: 100%;display: flex;flex-direction: row;justify-content: flex-end;border-top: grey solid 1rpx;background-color: white;z-index: 2;
}
.lession-buy{background-color: blue;line-height: 100%;font-size: 2rem;
}

（三）核心js代码

// pages/lessionDetail/lessionDetail.js
const app = getApp();
Page({/*** 组件的初始数据*/data: {listData:{},index:null,tabNavName:['详情',"目录","相关课程"],currentSelected:0,},onLoad:function(option){// 解决swiper塌陷问题// 思路：swiper高度=通过可用屏幕高度-课程图高度-tab栏高度let that=this;//测试获取指定元素属性（课程图的高度）wx.createSelectorQuery().selectAll('.lession-img-container').boundingClientRect(function (rect) {console.log(rect[0].height)//课程图高度imgHeightlet imgHeight = rect[0].height//获取tab栏的高度wx.createSelectorQuery().selectAll('.tab-nav-container').boundingClientRect(function (rect) {//tab栏高度rect[0].heightconsole.log(rect[0].height)//获取屏幕的可用高度wx.getSystemInfo({success: res => {// 解决swiper高度无法自适应的问题that.setData({//swiper高度clientHeightclientHeight: res.windowHeight - imgHeight - rect[0].height,});}})}).exec()  }).exec()}
})

（四）划重点

（1）获取元素高度

小程序api接口wx.createSelectorQuery() 创建查询节点，

.selectAll(’.lession-img-container’) 查询所有**.lession-img-container** 样式的元素

boundingClientRect(function (rect) {rect[0].height }) 回调函数，rect[0].height 就是我们所要的元素高度。

 wx.createSelectorQuery().selectAll('.lession-img-container').boundingClientRect(function (rect) { rect[0].height}).exec()

（2）获取可用屏幕高度

小程序api接口 wx.getSystemInfo 回调函数，获取系统信息。

res.windowHeight 就是屏幕的可用高度。

     //获取屏幕的可用高度wx.getSystemInfo({success: res => {res.windowHeight});}})

微信小程序学习：（五）swiper塌陷问题解决相关推荐

微信小程序学习(五)
转载请注明出处:https://blog.csdn.net/Strugglein/article/details/81916136 今天带来小程序第四节的学习内容,今天主要学习目标是: 1.JS 2. ...
微信小程序学习（五）：使用本地缓存，完成默认登录、、alert的使用、、引用全局变量，app.jsh中的变量
微信小程序学习(五):使用本地缓存,完成默认登录一开始想在app.js里面通过全局变量来实现默认登录状态的,但是没有用,每次重启还是要登录,在网上找了些资料后,可以用本地缓存, 这个是js文件这是 ...
小程序 pagescrollto_微信小程序学习笔记（三）-- 首页及详情页开发
一.常用组件在上一个章节中讲解了封装请求数据的模块,在此处请求轮播图的数据 1.首页轮播图数据的请求以及渲染 1.1 轮播图数据的请求 pages/home/home.js import 2 使用组 ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
2020微信小程序学习报告.2.17-3.1.（三）
微信小程序学习报告应学校课程要求,特此记录首先,小程序知识点: wx.request的使用:发https请求,一个小程序同时只能有5个网络请求,https的参数里,url是接口地址,method是请求 ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
微信小程序学习（加深）
微信小程序学习(加深) 一.wx:if 与 hidden 的对比 wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏 hidden 以切换样式的方式(display: none/block; ...
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
微信小程序学习实录一.wxml文档二.新建页面快捷方式三.微信小程序引入weui 四.双向数据绑定 1.wxml渲染层 2.js逻辑层提交表单到后端五.微信小程序跳转到H5 一.wxml文档 ...
微信小程序学习11：iconfont 网络字体图标使用（阿里巴巴）
微信小程序学习11:iconfont 网络字体图标使用(阿里巴巴) 使用方法 [1] 是直接下载图片,使用<image src="/static/images/v2.jpg" ...

微信小程序学习：（五）swiper塌陷问题解决

微信小程序学习：（五）swiper塌陷问题解决

github地址： https://github.com/leoricding/-

(一)问题分析

需求：实现tab切换，内容切换；内容切换，tab也切换。

困难：实现的过程中，发现swiper-item无法撑开swiper

原因分析：小程序中，swiper-item是脱离文档流的，而swiper是固定高度，所以会出现无法撑开的问题。

解决方案：js动态计算swiper的高度。在swiper-item中填充srcoll-view，而srcoll-view是可以上下滚动的。所以，swiper高度=小程序可用高度-swiper意外其他元素的高度。

（二）不罗嗦直接上代码

（三）核心js代码

（四）划重点

（1）获取元素高度

（2）获取可用屏幕高度

微信小程序学习：（五）swiper塌陷问题解决相关推荐

最新文章

热门文章