开启微信小程序之旅---轮播图使用

前言:

        公司最近有个项目,为了节约成本放弃了传统的Android APP开发使用微信小程序,花了3天时间看了一下官方的api文档,有将近4年Android开发经验的我,之前先研究了H5/CSS/JS然后在看一下小程序感觉不是特别难微笑。新技术还是值得研究一下的。这个是小程序官方地址点击打开链接

        谈谈我对小程序的理解吧,感觉小程序还是有前景的对于小型企业来说起码减少了企业的开发成本,对于有开发经验的程序员特别是前端程序猿来说学起来相对来说比较简单。

 正文:

         今天主要是谈谈我做轮播图时遇到的问题和总结:

        效果图展示:

        

我的代码:

1.wxml文件代码

< view >
<!--轮播图 -->
< swiper class= 'swiper-container' indicator-dots= 'true' autoplay= 'true' interval= '2000' vertical= 'true'>
< swiper-item >
< image class= 'swiper-image' src= '../../images/lifelike.jpg'></ image >
</ swiper-item >
< swiper-item >
< image class= 'swiper-image' src= '../../images/qinnv.jpg'></ image >
</ swiper-item >
< swiper-item >
< image class= 'swiper-image' src= '../../images/zxc.jpg'></ image >
</ swiper-item >
</ swiper >
</ view >

2.wxss文件代码

/* pages/main/main.wxss */
.swiper-container{
width: 100%;
height: 400 rpx;
}
.swiper-image{
width: 100%;
}
Tip:    直接复制就能使用。

1.设置轮播图片的宽度的时候发现在image标签下和swiper-item标签下都无法使用,只能在图片上面修改才管用。

2.设置图片的高度的时候需要在swiper跟标签下声明。

小程序不像传统的Android开发,它官方给了轮播图banner组件swiper


Tip:    这个是这个组件在官方的位置,常用的属性api文档中的位置。


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值