<swipercurrent="{{current}}"bindchange="change"duration="300"style="height:{{swiper_height + 80}}px;min-height:50%vh;"> <swiper-itemclass="swiper-item"wx:for="{{channel_list}}"wx:key="{{item.id}}"> <!-- navigator 的类名很重要,虽然一个循环用统一样式,但是我们基于不同的tab 取了...
swiper的父组件设置display:flex，swiper设置height:10rpx; flex:1 。10rpx是随便设的个值 ...
原理:给每条数据一个不同的class,再通过微信的selectAll返回每条的数据的高度,把这些高度相加就是整个swiper的高度了。 wxml代码截图如下: class-item{{index}}里面的{{index}}是为了给每条数据不同的class 定义一个返回高度的方法: get_wxml(className, callback) { wx.createSelectorQuery().selectAll(className...
<swiper-item> <image src="{{item}}"data-id='{{index}}'class="slide-image"mode="widthFix"bindload="imageLoad"/> </swiper-item> </block> </swiper> </view> wxss: .swiper image { width:100%; height: auto; } js: data: {//图片地址imgList: ['/images/wyh-img_bg.png','/images...
思路:每个swiper-item的高度都不一样,所以可以通过节点选择器(wx.createSelectorQuery())获取swiper-item的实际高度,重新给swiper设置高度 效果图: gifhome_400x716_15s.gif 重要提示: 每个swiper-item里的第一级子容器如果给了上下外边距margin,那么该swiper的高度是不会自动撑开的,就像这样: ...
{{bg}}"style='height:{{Hei}}'><blockwx:for="{{imgUrls}}"><swiper-item><imagesrc="{{item}}"class="slide-image"mode="widthFix"bindload='imgH'/>//bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦,还有就是设置这个image 100%宽度哟</swiper-item></block></swiper>...
10.4. swiper 微信内置有轮播图组件 默认宽度 100% 高度 150px 10.4.1. swiper 滑块视图容器。 10.4.2. swiper-item 滑块 默认宽度和高度都是100% 10.5. navigator 导航组件 类似超链接标签 open-type 有效值: 10.6. video 视频。该组件是原生组件,使用时请注意相关限制。
/* 轮播图 */.swiper-container{width:100%;height:150rpx;margin-top:20rpx;background-color:black;}.item{width:100%;height:100%;background-color:cadetblue;text-align:center;line-height:270rpx;color:floralwhite;font-size:96rpx;}swiper-item:nth-child(2).item{background-color:pink;}swiper-item...
{{item.name}} ... 我们来看下采用 sticky 布局做出来的通讯录效果～sticky 布局也可以通过给 sticky-section 配置push-pinned-header 来声明吸顶元素重叠时是否继续上推 像下图输入框和标签列表这种类型,标签列表吸顶时还是希望保留输入框吸顶。网格布局 网格布局即将列表切割成格子,每一行的高度固定,常见的视频列...