【黄啊码】微信小程序swipe切换及自适应高度问题解决

2024-04-07 18:48

本文主要是介绍【黄啊码】微信小程序swipe切换及自适应高度问题解决,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 我用的是医疗小程序挂号的例子,示例如图所示

页面代码,其中的变量这些东西需要的自己替换一下即可:

<view><view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">挂号预约</view><view class="swiper-tab-list {{currentTab==1 ? 'on' : ''}}" data-current="1" bindtap="swichNav">医生资料</view></view><swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight}}px" bindchange="bindChange"><swiper-item class="swiper0"><view class="zjtd_line"></view><view style="padding: 20rpx;"><view class="yuyue_left"></view><text>{{doctor_time}}{{week}}</text><view class="yuyue_right"></view></view><view class="zjtd_line"></view><view class="gh_list"><view class="item" wx:for="{{get_doctor_time}}" key="index"><view class="gh_left"><view>{{item.start_time}}</view><view>{{item.end_time}}</view></view><view class="gh_money">¥{{item.doctor_price}}</view><view class="gh_num">{{item.see_num}}号</view><button class="zjtd_btn" style="width:110rpx;">预约</button><view class="zjtd_line" style="margin-bottom:10rpx;"></view></view></view></swiper-item><swiper-item class="swiper1"><view class="doctor_content" style="text-align:left;">简介:{{doctor_info.doctor_note}}</view></swiper-item>
</swiper>

js代码:

data: {currentTab: 0,
}//切换代码swichNav: function( e ) {var that = this;if( this.data.currentTab === e.target.dataset.current ) {return false;} else {that.setData( {currentTab: e.target.dataset.current})this.getElementHeight(e.target.dataset.current)}},//动态获取高度getElementHeight(element) {//创建节点选择器var query = wx.createSelectorQuery();//选择idvar that = this;if(element==0){query.select(".gh_list").boundingClientRect(function (rect) {that.setData({winHeight: rect.height+50//这里加的50是日期位置的高度,没有这个位置的可忽略})}).exec();}else{query.select(".doctor_content").boundingClientRect(function (rect) {that.setData({winHeight: rect.height})}).exec();}},bindChange: function( e ) {var that = this;that.setData( { currentTab: e.detail.current });},onLoad: function (options) {//这里利用setdata的回调函数获取已经渲染的当前切换栏目的高度this.setData({get_doctor_time:res.data},function(){this.getElementHeight(this.data.currentTab);});}

对于css,一个一个挑,太麻烦了,所以这里我直接全部晒出来

/* pages/doctor/index.wxss */
.doctor{ padding: 30rpx;overflow: hidden;background-color: #fdfdfd;
}
.doctor_img{    width: 120rpx;height: 120rpx; margin: 10rpx 4rpx 0rpx; border-radius: 5rpx; overflow: hidden;}
.doctor_img img{width:100%;height:100%;object-fit:cover;}
.doctor_word{width:75%;color:#267377;margin-left:10rpx;}
.doctor_p{line-height: 48rpx; float: left;}.b_gray{background:#ccc;}
.doctor_dir {margin: 15rpx 0rpx 0rpx 0rpx;line-height: 43rpx;text-indent: 20rpx;float: left;word-break: break-all;
}
.dir_height{line-height:43rpx;}
.doctor_left{width:94%;float:left;}
/* tab样式开始 */
.main{padding: 20rpx;
}
.swiper-tab{display: flex;margin-bottom: 10rpx;
}
.swiper-tab-list{ display: inline-block;width: 49.5%;color: #777777;text-align: center;margin-bottom: 10px;color: #ffffff;border-bottom: 1px solid #395f64;padding: 20rpx;background-color: #395f64;border-radius: 10rpx;margin-right: 3rpx;
}
.on{ color: #ffffff;border-bottom: 1px solid #c70000;padding: 20rpx;background-color: #c70000;
}.swiper-box{ width: 100%; height: auto;
}
.swiper-box view{text-align: center;
}
/* tab样式结束 */
.yuyue_left{float:left;
}
.yuyue_right{float:right;
}
.gh_list{margin-top:20rpx;
}
.gh_left{float: left;width:25%;
}
.gh_left view {background-color: #fbfbfb;color: #000;padding: 8rpx;margin-bottom: 8rpx;border: 1px solid #e6e6e6;border-radius: 10rpx;
}
.gh_money{float:left;width:25%;text-align:center;margin-top: 35rpx;
}
.gh_num{float:left;width:25%;text-align:center;margin-top: 35rpx;
}
.zjtd_btn {font-size: 28rpx;color: white;padding: 2rpx;font-weight: unset;background-color: #d20303;top: 25rpx;
}
.spfl{padding: 25rpx;font-size: 28rpx;color:#ffffff;background-color: #395f64;border-bottom:1rpx solid #d4d4d4;overflow: hidden;
}
.zkfl_lj{float: right;
}
.doctor_list{text-align: center;overflow: hidden;
}
.doc_one{width:25%;float: left;
}
.doctor_imgs{width:100%;height: 120rpx;margin: 30rpx 0rpx 13rpx;border-radius: 5rpx;overflow: hidden;
}
.doctor_txt{text-align:center;
}
.doctor_content{color:#333333;text-align: left;line-height: 40rpx;float: left;padding: 15rpx;
}

 啊码整理了一部分小程序的案例,比较适合入门的朋友入手,如果需要可以从该链接【1】、链接【2】进入

这篇关于【黄啊码】微信小程序swipe切换及自适应高度问题解决的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/883388

相关文章

W外链微信推广短连接怎么做?

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时,首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值,还要能够激起人们的分享欲望。对于许多企业和个人来说,尤其是那些缺乏创意和写作能力的人来说,这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大,不同用户的需求和兴趣各异。因此,制作推广链接时需要精准定位目标受众,以便更有效地吸引他们点击并分享链接

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

如何解决线上平台抽佣高 线下门店客流少的痛点!

目前,许多传统零售店铺正遭遇客源下降的难题。尽管广告推广能带来一定的客流,但其费用昂贵。鉴于此,众多零售商纷纷选择加入像美团、饿了么和抖音这样的大型在线平台,但这些平台的高佣金率导致了利润的大幅缩水。在这样的市场环境下,商家之间的合作网络逐渐成为一种有效的解决方案,通过资源和客户基础的共享,实现共同的利益增长。 以最近在上海兴起的一个跨行业合作平台为例,该平台融合了环保消费积分系统,在短

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

pip-tools:打造可重复、可控的 Python 开发环境,解决依赖关系,让代码更稳定

在 Python 开发中,管理依赖关系是一项繁琐且容易出错的任务。手动更新依赖版本、处理冲突、确保一致性等等,都可能让开发者感到头疼。而 pip-tools 为开发者提供了一套稳定可靠的解决方案。 什么是 pip-tools? pip-tools 是一组命令行工具,旨在简化 Python 依赖关系的管理,确保项目环境的稳定性和可重复性。它主要包含两个核心工具:pip-compile 和 pip

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打