根据小程序的设定,swiper组件默认高度为150px,无法根据内容来撑高.如果里面的内容固定还好说,直接设置一个高度就可以了.要是里面内容是动态变化的,这个特性使得我们使用这个组件的时候感到诸多不便. 举个例子: 如下这种情况,如果我们不给它设置一个高度,那么它只会在那个150px局部进行滚动了. 那么我们如何动态改变它的高度呢? 情况1:数据每条高度都是一样 原理:获取1条数据的高度*数据的条数. js代码如下: const query = wx.createSelectorQuery()

小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度 解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动兼容性不好,在IOS会有无法滑动的情况 <swiper class="content" style="height:{{height}}px" bindchange="change" current-item-id="{{docid}

scroll-view 里面继续套一个 scroll-view ,设置纵向允许滚动 <swiper class="swiper"> <swiper-item> <scroll-view scroll-y="true" class="scroll"> <!-- 这里是内容 --> </scroll-view> </swiper-item> </swiper> css

小程序swiper实现订单页面 myOrder.wxml <!--pages/myorder/myorder.wxml--> <view class="swiper-tab"> <block wx:for="{{swipertab}}" wx:key="sptab"> <view class="swiper-tab-list {{currtab == item.index ? 'on' : ''

众所周知,可以滑动的 scroll 组件在移动端非常的重要,几乎每个页面都要用到. 而小程序的 scroll-view 组件就比较坑了,非得指定一个高度才能正常使用.布局复杂的时候谁还给你算高度啊... 坑归坑,没办法,还是得用--既然官方要求必须传高度,那就想办法计算吧. 一.布局分析,推导公式 先给个示例图: 这是一个稍微复杂点的页面,最上面是两个 tab 标签,每个标签的页面是一个子组件.第二个子组件布局是上面一个标题,下面是 scroll-view . 再画个解剖图吧-- 页面分三部分,

最近在做小程序,已经设置了宽高,placeholder没有超出input宽度,却被挡住了一部分,上代码看一下: wxml: <view class='container'> <input class='phone' placeholder='请输入手机号' placeholder-class='placeholder'></input> <view class='code_container'> <input class='code' placehol

微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下: 1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本:background-image: url("data:image/png;base64,iVBORw0KGgo=..."); 3.为了是背景图片自适应宽高,可以做如下设置: background-repeat:

微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本:background-image: url("data:image/png;base64,iVBORw0KGgo=..."); 3.为了是背景图片自适应宽高,可以做如下设置: background-repeat:n

微信小程序swiper实现 句子控app首页滑动卡片 引言:最近看到句子控APP首页的效果很清新,可是发现他的微信小程序端没有实现这个功能,我看了一下难度不大,于是尝试着去实现. 实现效果如下: 1.定义一个yiyancard自定义组件,在根目录下新建一个components文件夹并在其内部新建一个yiyancard文件夹. 2.在pages文件夹下新建一个home页面 3.在home页面的json引入yiyancard组件,并在wxml中使用 index.json { "usingCompon

微信小程序利用swiper制作内容高度不定的tab选项卡,不使用absolute定位,不定高度,由内容自由撑开主要思路是获取内容区的高度来给swiper动态设置值 .wxml <view class='content'> <view class="swiper-tab"> <view class="swiper-tab-item {{currentTab==0?'active':''}}" data-current="0&qu

swiper的宽和高一定要设置在swiper上面.swiper-item默认继承swiper的宽和高.swiper-item容器里面的宽和高没有继承他的父节点宽和高,需要从新设置. 不明白之处,可以咨询群主,或是查看小程序API文档

最近在做小程序开发,复制官方文档上的swiper组件实测后发现,图片不能自适应.网上找了几个版本测试都发现存在一些小问题,目前这个版本本人实测是最好用的.记录一下,方便日后使用. 感谢原创大神的帮助,文章地址:https://www.cnblogs.com/wangyihong/p/8610956.html wxml: <view class='swiper'> <swiper indicator-dots="{{indicatorDots}}" vertical=&

scroll-view占满整个屏幕,且scroll-view的滚动不影响到页面其他地方的滚动 在iphone6的尺寸下,scroll-view设置高度为1110rpx,就不会影响页面其他地方的滚动 但是当屏幕尺寸调至iphone5时,左边scroll-view的滚动,就会带动右边内容的滚动 而在iphone7 plus时,scroll-view不能占满整个屏幕 最后发现只需要将scroll-view的高度设置为 100vh 就可以解决这个问题 <scroll-view scroll-y="

本来呢,我是有专门整理小程序恶心bug的文章的,每次只要添加汇总就好, 但是呢,鉴于这个问题的恶心程度,所以我把他单独拿出来说了. ----------------------------------------------------------------产品经理都说恶心的需求-------------------------------------------------------------------------- 要知道,在小程序里边是有一个封装好的swiper组件,专门用于轮播图

小程序中有一个组件swiper 就是滑块视图容器 其中提供了两个属性 previous-margin:前边距,可用于露出前一项的一小部分       next-margin:后边距,可用于露出后一项的一小部分 假设设置 一个view的尺寸为宽为600rpx,高为600rpx,前边距为30rpx,后边距为30rpx,最终呈现结果是这样的 图一和图二     图三 这是将图片尺寸设置跟屏幕宽一样的尺寸,然后就没有之间的空白间隙了,所有得为图片加上空白间距 但这并不是想要的结果,其实边距指的是后面那张

不管什么项目,一个轮播是基本少不了的,现在就来踩下微信小程序的swiper吧! 首先打开文档,可以看到下面这些参数:(https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html) 后面有详细的解说,我就不一一说了!主要看下面的! <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{

1. 设置图片,小程序支持两种引用图片方法,一种是本地引用,一种是网络资源引用. 但是引用本地图片的的时候不能用wxml样式去引用本地的图片,不会报错,也没效果.就是在wxss页面中不能引用本地的图片.这个时候就要用image组件了. 2. 加载本地的图片 <image class="user" src='../../images/login/icon.png' style='width:120px;height:120px'></image> src是图片的相

swiper是微信小程序的一个滑动组件,非常重要.如果只是做简单的轮播图而不进行复杂的逻辑,直接可以使用,甚至不需要知道组件的方法.今天在做一个如下的页面时,快速滑动swiper出现了问题: 控制台打印,发现bindChange绑定的方法重复执行了,我们再看官方文档的解释: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 而我们的bindChange确实使用了setData(),来保证swiper组件的

我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性:1.src              图片资源地址2.mode          图片裁剪.缩放的模式3.binderror     当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: ‘something wrong’}4.bindload     当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:’图片

还有几天快过年了,在这里提前祝大家新年快乐! 今天没事研究了一下小程序,想整个轮播图玩玩,然后开始看看文档https://mp.weixin.qq.com/debug/wxadoc/dev/component/swiper.html?t=20161107(官网地址) 示例代码 index.wxml <view class="container"> <swiper indicator-dots="{{indicatorDots}}" autoplay

这段时间的主业是完成一个家政类小程序,终于是过审核发布了.不得不说微信的这个小程序生态还是颇有想法的,抛开他现有的一些问题不说,其提供的组件系统乍一看还是蛮酷的.比如其提供的一个叫swiper的视图组件,就可以在写界面的时候省不少时间和代码,轮播图片跟可滑动列表都可以用.导致现在回来写angular项目时也想整一个这样的组件出来,本文就将使用angular的组件能力和服务能力完成这么一个比较通用,耦合度较低的swiper出来. 首先要选择使用的技术,要实现的是与界面打交道的东西,自然是实现成一个