关于微信开发者工具中swiper轮播高度限制在150px解决方法

首先,我被折磨了整整一个小时如下图,死活铺不满

我试图在给swiper添加高度,没用,百分比也没有,然后我发现当我写高度为300rpx时,出现的图片高度倒退为128了,所以我一怒之下写成3000rpx,就好了。

以下是wxml的代码:

<swiper class="swiper" autoplay circular indicator-dots indicator-active-color="#ff0" interval="3000" vertical>
<swiper-item>
<image src="utils/wedding/p1.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="utils/wedding/p2.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="utils/wedding/p3.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="utils/wedding/p4.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="utils/wedding/p5.jpg" mode="widthFix"></image>
</swiper-item>
<swiper-item>
<image src="utils/wedding/p6.jpg" mode="widthFix"></image>
</swiper-item>
</swiper>

 以下是wxss的代码

swiper{
	height:3000rpx;
}

以下就是效果图:

  • 4
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 要在微信开发者工具制作轮播图,你需要使用小程序的swiper组件。下面是制作轮播图的步骤: 1. 在小程序项目的wxml文件,添加swiper组件的代码。如下所示: ``` <swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000"> <swiper-item> <image src="/images/slide1.jpg"></image> </swiper-item> <swiper-item> <image src="/images/slide2.jpg"></image> </swiper-item> <swiper-item> <image src="/images/slide3.jpg"></image> </swiper-item> </swiper> ``` 其,indicator-dots属性表示是否显示指示点,autoplay属性表示是否自动播放,interval属性表示自动播放的间隔时间,duration属性表示滑动动画的时长。swiper-item表示每一个轮播图项,可以在其添加图片、文字等内容。 2. 在小程序项目的wxss文件,设置swiper组件和swiper-item的样式。例如,可以设置轮播图的宽度、高度、背景色等样式。 ``` swiper { width: 100%; height: 300rpx; } swiper-item { background-color: #fff; height: 100%; } image { width: 100%; height: 100%; } ``` 3. 在小程序项目的js文件,可以添加一些其他的配置项。例如,可以设置swiper组件的current属性,使得轮播图始终从第一张开始展示。 ``` Page({ data: { current: 0, }, onLoad: function () { setInterval(() => { this.setData({ current: (this.data.current + 1) % 3, }) }, 5000); }, }) ``` 其,current属性表示当前的轮播图项索引,onLoad函数表示小程序页面加载时执行的函数。setInterval函数表示每隔一定时间自动切换轮播图项。 通过以上三个步骤,就可以在微信开发者工具制作轮播图了。你可以根据自己的需求进行调整和修改。 ### 回答2: 微信开发者工具是一个用于开发微信小程序的工具,可以方便地进行小程序页面的创建、编辑、预览和调试。要实现轮播图效果,可以通过以下步骤操作: 1. 在微信开发者工具创建一个新的小程序页面,命名为“轮播图”。 2. 在轮播图页面的`wxml`文件,添加一个`swiper`组件来实现轮播图的效果。swiper是微信小程序专门用于实现轮播图功能的组件。 3. 在`swiper`组件内部,使用`swiper-item`组件添加多个轮播图项。每个`swiper-item`相当于一个轮播图的单独页面。 4. 在每个`swiper-item`内部,可以添加图片、文字或其他内容,作为轮播图的内容。 5. 在`wxml`文件设置`swiper`组件的相关属性,如`indicator-dots`、`autoplay`等来控制轮播图的显示和切换效果。 6. 在`wxss`文件,可以对轮播图的样式进行调整,如设置轮播图的宽度、高度、背景颜色等等。 7. 在`js`文件,可以添加相关逻辑代码,实现轮播图的数据绑定和交互功能。 完成上述步骤后,即可在微信开发者工具预览和调试轮播图效果。可以修改相关属性和样式,进行调试和优化。最终可以将轮播图页面发布为小程序,供用户在微信使用。 ### 回答3: 要在微信开发者工具创建轮播图,需要以下步骤: 1. 在微信开发者工具的项目目录下,找到 pages 文件夹,并在该文件夹下创建一个新的页面(例如 slide)。 2. 双击打开新创建的页面,打开 .wxml 文件(例如 slide.wxml),编写轮播图相关的代码。轮播图通常使用 wx:swiper 组件实现,可以在 .wxml 文件添加以下代码: ``` <swiper autoplay="true" indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#007aff"> <block wx:for="{{imageUrls}}" wx:key="index"> <swiper-item> <image src="{{item}}" class="slide-image"></image> </swiper-item> </block> </swiper> ``` 上述代码,使用了 wx:for 来遍历 imageUrls 数组,并将每个元素都渲染为 swiper-item,其的 image 标签用于显示图片。 3. 在 .wxss 文件(例如 slide.wxss)添加样式,对轮播图进行美化: ``` .slide-image { width: 100%; height: 100%; } ``` 以上代码将轮播图的图片设置为全屏展示。 4. 在 .js 文件(例如 slide.js)添加相应的逻辑代码,比如定义 imageUrls 数组并初始化: ``` Page({ data: { imageUrls: [ 'image1.png', 'image2.png', 'image3.png' ] } }) ``` 上述代码,定义了一个 imageUrls 数组,其包含了轮播图的图片路径。 5. 在 app.json 文件,将新创建的页面(slide)添加到 pages 数组: ``` "pages": [ "pages/index/index", "pages/slide/slide" ] ``` 6. 运行微信开发者工具,查看轮播图效果。在左上角的预览窗口选择对应的页面(slide)进行预览和调试。 通过以上步骤,就可以在微信开发者工具成功创建并调试轮播图效果了。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值