现在写微信小程序，遇到了个问题

最新推荐文章于 2022-08-19 16:53:57 发布
最新推荐文章于 2022-08-19 16:53:57 发布
阅读量281 收藏 1
点赞数
分类专栏： 小程序 文章标签： 小程序swiper两个特效产生出的问题 swiper不能自适应高度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/czkcui123/article/details/82186818
版权

问题：上边是轮播图，下边是选项卡，都用的swiper组件，上边的轮播图一写上，下边的选 项卡就出问题，出现的效果就是上边的轮播图自动轮播，下边的选项卡也轮播，第二个问题就是选项卡里的内容是显示不全，分析原因是swiper不能自适应高度，请大神关注解决一下

直接代码：

这是JS里边的

//获取应用实例

const app = getApp()

Page({

data: {

// 轮播图

imgUrls: [

'../../images/l1.png',

'../../images/l2.png',

'../../images/l3.png',

'../../images/l4.png',

'../../images/l4.png'

],

swiperIndex: 0,//如果不写第一次运行会出错

// 轮播图

},

// 轮播图

bindchange(e) {

this.setData({

swiperIndex: e.detail.current

})

},

// 轮播图

// 选项卡

data: {

currentData: 0,

},

//获取当前滑块的index(下标) 选项卡

bindchange: function (e) {

const that = this;

that.setData({

currentData: e.detail.current

})

},

// 选项卡

// 点击切换 滑动index赋值 选项卡

checkCurrent: function (e) {

const that = this;

if (that.data.currentData == e.target.dataset.current) {

return false;

} else {

that.setData({

currentData: e.target.dataset.current

})

}

}

// 选项卡 end

})

这是WXML里的

<!-- 中间选项卡 -->

<view class="topTabSwiper">

<view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>推荐</view>

<view class='tab {{currentData == 1 ? "tabBorer" : ""}}' data-current = "1" bindtap="checkCurrent">热点</view>

<view class='tab {{currentData == 2 ? "tabBorer" : ""}}' data-current = "2" bindtap='checkCurrent'>关注</view>

</view>

<!-- 中间选项卡END -->

 

<!-- 滑动显示的内容 -->

<swiper class="swiper" current="{{currentData}}" style="height:{{con_cent[current]}}rpx;" bindchange="bindchange">

<swiper-item><view class="swiper_con">

<!-- 中间内容页 -->

<view class="con_cent">

<!-- 标题头像发布日期 -->

<view class="conen_title">

<view class="conent_img"><image src="../../../images/1.png"></image></view>

<view class="conent_title">

<view class="content_tt">

<view class="conentt_ming">海尔小集团</view>

<view class="conentt_admin">管理员</view>

</view>

<view class="content_date">前天19:20</view>

</view>

</view>

<!-- 标题头像发布日期END -->

<!-- 线条 -->

<!-- <view class="con_hr">线条</view> -->

<!-- 线条 -->

<!-- 内容版块 -->

<view class="con_conent">

<view class="conentt_ent">

<view class="conentt_title">

<strong class="conett_strong">#今日头条#</strong>

钢材市哈哈 合。

</view>

</view>

</view>

<!-- 内容板块END -->

<view class="con_footer">

<view class="conf_cont">

<view class="confot_zan">

<icon class="confotz_icon" type="waiting" size="15" color="#dddddd"></icon>

<view class="confotz_text">点赞</view>

</view>

<view class="confot_zhuan">

<icon class="confotz_icon" type="success" size="15" color="#dddddd"></icon>

<view class="confotz_text">转发</view>

</view>

</view>

</view>

</view>

<!-- 中间内容页END -->


 

<!-- 中间内容页 -->

<view class="con_cent">

<!-- 标题头像发布日期 -->

<view class="conen_title">

<view class="conent_img"><image src="../../../images/1.png"></image></view>

<view class="conent_title">

<view class="content_tt">

<view class="conentt_ming">海尔小集团</view>

<view class="conentt_admin">管理员</view>

</view>

<view class="content_date">前天19:20</view>

</view>

</view>

<!-- 标题头像发布日期END -->

<!-- 线条 -->

<!-- <view class="con_hr">线条</view> -->

<!-- 线条 -->

<!-- 内容版块 -->

<view class="con_conent">

<view class="conentt_ent">

<view class="conentt_title">

<strong class="conett_strong">#今日头条#</strong>

哈哈哈 合。

</view>

</view>

</view>

<!-- 内容板块END -->

<view class="con_footer">

<view class="conf_cont">

<view class="confot_zan">

<icon class="confotz_icon" type="waiting" size="15" color="#dddddd"></icon>

<view class="confotz_text">点赞</view>

</view>

<view class="confot_zhuan">

<icon class="confotz_icon" type="success" size="15" color="#dddddd"></icon>

<view class="confotz_text">转发</view>

</view>

</view>

</view>

</view>

<!-- 中间内容页END -->

</view></swiper-item>

 

<swiper-item><view class="swiper_con">

<!-- 动态等标题 -->

<view class="con_nav">

<view class="cnav_text">动态</view>

<image class="cnav_img" src="../../../images/images/筛选.png"></image>

</view>

<!-- 动态等标题导航 -->


 

<!-- 中间内容页 -->

<view class="con_cent">

<!-- 标题头像发布日期 -->

<view class="conen_title">

<view class="conent_img"><image src="../../../images/1.png"></image></view>

<view class="conent_title">

<view class="content_tt">

<view class="conentt_ming">海尔小集团</view>

<view class="conentt_admin">管理员</view>

</view>

<view class="content_date">前天19:20</view>

</view>

</view>

<!-- 标题头像发布日期END -->

<!-- 线条 -->

<!-- <view class="con_hr">线条</view> -->

<!-- 线条 -->

<!-- 内容版块 -->

<view class="con_conent">

<view class="conentt_ent">

<view class="conentt_title">

<strong class="conett_strong">#今日头条#</strong>

钢材市场之所以淡季不哈哈哈 。

</view>

</view>

</view>

<!-- 内容板块END -->

<view class="con_footer">

<view class="conf_cont">

<view class="confot_zan">

<icon class="confotz_icon" type="waiting" size="15" color="#dddddd"></icon>

<view class="confotz_text">点赞</view>

</view>

<view class="confot_zhuan">

<icon class="confotz_icon" type="success" size="15" color="#dddddd"></icon>

<view class="confotz_text">转发</view>

</view>

</view>

</view>

</view>

<!-- 中间内容页END -->

</view></swiper-item>


 

<swiper-item><view class="swiper_con">

<!-- 动态等标题 -->

<view class="con_nav">

<view class="cnav_text">动态</view>

<image class="cnav_img" src="../../../images/images/筛选.png"></image>

</view>

<!-- 动态等标题导航 -->

<!-- 中间内容页 -->

<view class="con_cent">

<!-- 标题头像发布日期 -->

<view class="conen_title">

<view class="conent_img"><image src="../../../images/1.png"></image></view>

<view class="conent_title">

<view class="content_tt">

<view class="conentt_ming">海尔小集团</view>

<view class="conentt_admin">管理员</view>

</view>

<view class="content_date">前天19:20</view>

</view>

</view>

<!-- 标题头像发布日期END -->

<!-- 线条 -->

<!-- <view class="con_hr">线条</view> -->

<!-- 线条 -->

<!-- 内容版块 -->

<view class="con_conent">

<view class="conentt_ent">

<view class="conentt_title">

<strong class="conett_strong">#今日头条#</strong>

钢材哈哈哈 合俣。

</view>

</view>

</view>

<!-- 内容板块END -->

<view class="con_footer">

<view class="conf_cont">

<view class="confot_zan">

<icon class="confotz_icon" type="waiting" size="15" color="#dddddd"></icon>

<view class="confotz_text">点赞</view>

</view>

<view class="confot_zhuan">

<icon class="confotz_icon" type="success" size="15" color="#dddddd"></icon>

<view class="confotz_text">转发</view>

</view>

</view>

</view>

</view>

<!-- 中间内容页END -->

</view></swiper-item>

</swiper>

这是WXSS里边的

/* 轮播图部分 */

.boximg{

background:#B70100;

padding:10rpx;

}

 

.swiperClass {

margin: 0;

margin-top: 10px;

}

.slide-image {

width: 670rpx;

height:350rpx;

border-radius: 10px;

position: relative;

}

image.active {

transform: none;

transition: all 0.2s ease-in 0s;

}

image.quiet {

transform: scale(0.8333333);

transition: all 0.2s ease-in 0s;

}

 

/* 轮播图部分END */

/* 热点推荐关注选项卡 */

.tab {

float:left;

width:33.3333%;

text-align: center;

padding:10rpx 0;

}

.topTabSwiper {

border-top: 1px solid #ccc;

border-bottom: 1px solid #ccc;

zoom: 1;

}

.topTabSwiper:after{

content:"";

clear:both;

display:block;

}

.tabBorer{

border-bottom:1rpx solid #f00;

color:#f00;

}

/* 热点推荐关注选项卡END */

/* 内容显示滑动组件 */

.swiper{

width:750rpx;

background:#eaeaea;

}

.swiper_con{

width:750rpx;

}

/* 内容显示滑动组件END */

/* 动态导航 */

.con_nav{

width:630rpx;

height:70rpx;

margin:0 auto;

}

.cnav_text{

float:left;

text-align: center;

line-height:70rpx;

}

.cnav_img{

margin-top:19rpx;

float:right;

width:41rpx;

height:41rpx;

}

/* 动态导航结束 */

 

/* 中间内容部分 */

.con_cent{

width:715rpx;

height:440rpx;

margin:auto auto 20rpx auto;

background:#ffffff;

border-radius: 20rpx;

position:relative;

}

.conen_title{

width:635rpx;

height:90rpx;

position: absolute;

top:20rpx;

left:40rpx;

overflow:hidden;

}

.conent_img{

width:90rpx;

height:90rpx;

float:left;

margin-right:20rpx;

}

.conent_img image{

border-radius: 50rpx;

width:90rpx;

height:90rpx;

}

/* 标题 */

.conent_title{

float:left;

width:350rpx;

margin-top:12rpx;

}

.content_tt{

width:400rpx;

height:30rpx;

font-size: 30rpx;

overflow: hidden;

}

.conentt_ming{

float:left;

color:#000000;

font-family: '黑体';

margin-right:20rpx;

}

.conentt_admin{

float:left;

color:red;

font-size: 25rpx;

}

.content_date{

float:left;

font-size:25rpx;

margin-top:13rpx;

overflow: hidden;

}

 

.con_conent{

width:635rpx;

height:255rpx;

margin:0 auto;

position:absolute;

top:120rpx;

left:40rpx;

/* 线条 */

border-top:1rpx solid #eaeaea;

border-bottom:1rpx solid #eaeaea;

/* 线条end */

}

.conentt_ent{

width:635rpx;

margin:20rpx auto;

}

.conentt_ent view{

float:left;

}

.conentt_title{

display:inline-block;

font-size:26rpx;

 

}

.conett_strong{

font-size:30rpx;

color:#B70100;

}

 

.con_footer{

position:absolute;

left:40rpx;

bottom:0;

width:635rpx;

height:53rpx;

}

.conf_cont{

position: absolute;

right:30rpx;

}

.confot_zan , .confot_zhuan{

float:left;

width:120rpx;

height:30rpx;

margin-top:12rpx;

margin-left:5rpx;

font-size:25rpx;

}

.confotz_icon{

float:left;

margin-left:20rpx;

}

.confotz_text{

float:right;

margin-top:1rpx;

}

/* 中间内容部分END */

 

 

clkcglass
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
在编写微信小程序时遇到的一些问题（一）
abchhhxz的博客
07-29 458
首先是整个对于微信小程序流程的一个梳理 小程序的编写，分为前端页面与后端页面，两个地方需要分别启动，是一个典型的前后端分离的一个典型的应用例子。 前端需要使用HbuilderX进行编译，后端正常使用IDEA启动就行了 同时，前端的页面不只有小程序，同样也有管理的后台的页面，这个时候就需要在在后端使用的框架的相应前端位置安装node，获得其所对应的 ...
关于微信小程序无法使用css3过度属性transition以及微信小程序如何利用api进行画面过度的展示...
走在路上的张先森
09-29 2961
首先是css在html文件里面的浏览器支持情况： 微信小程序不支持css3 官方实例 wxml： <view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view> js： Page({ data: { animationData...
微信小程序 设置微软雅黑字体
li222248的博客
06-24 4006
.title{ font: 20rpx "microsoft yahei"; }
transform: scale(0.8)不生效解决(CSS)
YanHSama的博客
06-14 4299
transform：scan()失效解决
css scale 元素不放大,列元素上的CSS 3动画“transform：scale”对chrome不起作用
weixin_39832448的博客
08-03 576
我在Chrome v44中遇到一个问题,我尝试使用“transform：scale(1.1)”放大列项目中的图像,动画不起作用…如果我尝试使用firefox,它运行良好！我认为问题是由于chrome,但我想知道是否有人找到了解决方法..column-wrap {columns: 3;}.column-item {background-color: red;}.column-img-wrap {ma...
微信小程序设置swiper圆角在ios上失效解决
Martin的博客
08-19 1769
微信小程序设置swiper圆角在ios上失效解决
微信小程序源码大全（130个）
04-21
这个压缩包文件包含了130个微信小程序的源码，是学习和研究微信小程序开发的宝贵资源。通过这些源码，你可以深入理解微信小程序的架构、开发流程以及常见功能的实现。 首先，微信小程序的开发基础是JavaScript、...
微信小程序-美食列表源码
04-26
"美食列表源码"是针对微信小程序开发者，特别是初学者的一个实践项目，它可以帮助学习者理解并掌握微信小程序的基本架构和开发流程。 在微信小程序的开发中，主要有以下几个关键知识点： 1. **WXML**: 这是微信小...
微信小程序项目-美食列表
最新发布
05-13
本项目“微信小程序项目-美食列表”是为小程序开发初学者设计的一个实践案例，旨在帮助他们更好地理解和掌握微信小程序的开发技能。 首先，我们要了解微信小程序的基本结构。一个小程序通常包含app.json、index....
微信小程序 image组件遇到的问题
10-16
主要介绍了微信小程序 image组件遇到的问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
微信小程序开发遇到的问题：JAVA服务器端，微信支付
03-29
最近接了一个微信小程序的活，想象中微信小程序应该跟普通的网站开发差不多，实际上就前端来说确实差不多，但是还是遇到不少蛋疼的问题，所以这里记录一下，希望对后来人有所启示。   服务器端方面： 服务器端是用...
transition动画过渡没作用（无效）
weixin_45689946的博客
10-27 1万+
transition无效的原因 1、只给该元素赋予了过渡属性的结束值，并未在过渡前定义初始值。 css .header { position: relative; width: 200px; height: 50px; background: red; transition: all 0.3s ease-in-out; } .showMenu.layui-layout-admin .header{ left:-200px; } js $(".moveHandle").click(functio
小程序开发中遇到的问题—汇总
IT博客技术分享
04-07 4万+
小程序面试题 1.bindtap和catchtap的区别是什么？ bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡 2.Js数组转成换字符串，强制转换成整数及转换成浮点数的函数分别是什么？ js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调用这些方法，这两个函...
微信小程序开发中遇到的问题与技巧汇总
雷佳佳的博客
06-16 8861
从微信小程序发布到现在经手的小程序也有好几个了，开发过程中多少会遇到一些坑，这里汇总一下开发中遇到过的坑与小程序开发技巧。 首先我要先吐槽一下mpvue。 由于我之前做过的小程序全部都是原生开发，最近的一个项目一开始的选型是准备使用mpvue的，我自己也想尝尝鲜，但是在做完基础准备，开始开发的第三天在写一个带输入框的组件时遇到了严重的bug，以至于所有组件形式的输入框全部都不能使用。 在githu...
微信小程序开发过程中遇见的问题
qq407949480的博客
09-21 1379
1、改变传统前端开发思想，而是MVVM思想，双向数据绑定很重要，不再是操作dom。 2、怎样在小程序页面中打出空格（&amp;nbsp;）或者换行(&lt;br/&gt;)等需要在&lt;text decode="{{true}}"&gt;哈&amp;nbsp;哈&lt;/text&gt;中，否则不起作用 3、一般setData方法多用于点击后改变页面信息或者刷新后与后台交互获取最新的信息。直...
微信小程序选项卡页面切换
stromGui同视
01-31 1万+
最近搞了个微信小程序切换的demo，有点像头条的那个，我给你大家分享下。 代码如下： index.wxml view class='topTabSwiper'> view class='tab {{currentData == 0 ? "tabBorer" : ""}}' data-current = "0" bindtap='checkCurrent'>推荐view>
格林时间和时间戳：js时间格式转化成正常时间格式
czkcui123的专栏
10-26 3491
把自己遇到的每个问题所找到的答案都收集起来 1： //获取格林时间 var date1 = new Date(new Date(new Date().toLocaleDateString()).getTime()); var date2 = new Date(new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000-1)...
微信小程序开发中30个常见问题解决方案
Joychen404的博客
05-11 8483
在小程序开发时需要注意哪些问题才可以避免走弯路呢？本文整理了30条常见问题，让开发者尽可能的绕开弯路微信小程序在支持个人开发者后，一大批程序员从一条布满雷区的道路，跳到了另一条布满陷阱的坑路。许多人都开发过微信小程序，在开发路上踩坑的人不占少数，在项目实施时总会遇到一些问题。在开发小程序时需要注意哪些问题才可以避免走弯路呢？本文整理了30条常见问题，让开发者尽可能的绕开弯路。1、小程序名称不得与公...
小程序font-family字体设置
热门推荐
sunbohu的博客
12-29 5万+
小程序font-family字体设置 适用于HTML，CSS，font-family：中文字体的英文名称 宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312...
微信小程序开发技巧与常见问题总结
"这篇内容主要总结了原生微信小程序开发中的关键知识点和常见问题，涵盖了从页面优化到功能实现的多个方面。" 1. **获取地理位置**：微信小程序提供了获取用户当前位置的能力，这对于本地服务应用或者基于位置的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值