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

起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class='second-code'> <view class="img-box"> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}&quo

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

1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造成数据不一致,代码如下: data: { array: [{ text: '数组' }] } onLoad:function(){ this.data.array[0].text=1; console.log(this.data.array[0].text); } 修改代码: onLoad:func

微信小程序是可以动态修改页面标题的. 首先我们来看看静态是怎么实现的 在对应页面的json文件里面加入下面代码就可以实现了 { "navigationBarTitleText": "素材图库" } 效果图如下: 其他动态的也是十分简单,毕竟是提供好了的接口,我们调用一下就行了.接口嘛,那就要操作对应的js文件咯.参考地址 quwei: function () { wx.setNavigationBarTitle({ title: '趣味表情' }) } 点击的时候触

微信小程序的title是在json里面配置的 "navigationBarTitleText": "title名称" 这种title是固定死的不灵活处理一些页面相同title不同的场景就不够用了这个时候就需要动态配置title 微信小程序的setNavigationBarTitle方法可以实现title的动态配置 wx.setNavigationBarTitle({ title: "title名称" }) 这个方法可以写在oLoad里面或者onS

一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个比较通用,颜色,大小都可以自己定义.当然了,来的最快的其实是用图片代替.二.微信小程序中评分功能实现 1.css文件中引入字体文件.也可以点此下载字体文件   @font-face { font-family: 'FontAwesome'; src: url('https://netdna.boot

开发必备:熟悉微信小程序组件开发 开发思路:如果只有一条数据,直接用css3关键帧动画:如果有多条数据,则在当前动画运动到一定时间的时候,将其数据替换掉,使之在视觉效果上有一个从下到上播放的状态.数组循环播放的状态是通过将当前播放元素置换到末尾实现,即通过数组元素删除插入方法将整个数组元素串成一个闭环. 本例是将跑马灯作为一个公共组件开发的,故代码展示为组件形式 目标UI: wxml文件代码: <view wx:if="{{lampData && lampData.leng

在微信小程序开发中,经常遇到一些由后台控制显示(is_open : 1)或者隐藏(is_open : 0),有俩种办法: 复杂办法 1.先在元素的class中 class=’{{show?’true’:’hidden’}}’ 2.再在相对应的js中配置show的值,例 data: {show:1,} 3.最后在相对应的css中定义 .hidden{display:none;} 简单办法 直接在元素中加入wx:if=”{{is_open !=”}}”代码,后台传到前端的is_open为1时,元素就

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

获取列表长度(动态渲染),当长度>x时添加内联样式并绑定数据{{}},通过js动态更改{{}}

  1.动态渲染页面.改变css.样式必须setData渲染过去   this.setData({ userInfo: app.globalData.userInfo, token: app.globalData.token, url: app.globalData.url, css:'hidden' });   2.路径传参, 在页面的 onLoad获取 onLoad: function (options) { console.log("参数",options.imei); }  

尺寸单位: rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素.所以用rpx可解决适配问题 样式导入: /** app.wxss **/ @import "common.wxss"; 内联样式: 框架组件上支持使用 style.class 属性来控制组件的样式. style:静

查看API: wx.setNavigationBarColor(OBJECT) 代码: wx.setNavigationBarColor({ frontColor: '#ffffff', // 必写项 backgroundColor: '#1BC3B8', // 必写项 animation: { // 可选项 duration: 400, timingFunc: 'easeIn' } })

很简单-就两步 wxml(遍历style的background-image路径即可) wxss(.ab)

<view class=' {{topid==1?"top": "untop"}}' >

这里对 input 使用的是 bindinput 方法: <input type="text" bindinput="input"> <button bindtap="btnclick">{{text}}</button> page.js文件: //获取应用实例 const app = getApp() Page({ data: { text: "点击", inputVal: null },

wx.getSystemInfo({ success: (res) => { wx.createSelectorQuery().select('#scrollbox').boundingClientRect((rect) => { this.setData({ height: res.windowHeight - rect.top }) }).exec() } })

一. 脚本部分: 1. 表达式无效的处理: 如果你发现自己编写的表达式无效或者数据不展示,那么请先检查你的表达式是否有添加{{}},小程序中全部都要添加的,只要是在模板中调用js中的数据 2. 获取元素位置问题: 微信小程序是基于数据的,不支持DOM和BOM,所以没有提供获取元素位置的方法. 虽然有提供滚动事件.触摸事件,也只能获取触摸点相关的位置,并不能直接获取元素的位置,暂时还没摸索到合适替代方案. 3. 单击事件传值: 在小程序中,你无法再像h5那种直接在单击事件方法中传参了,它只提供了b

获取不同机型微信小程序状态栏+导航栏高度 一. 前言 很多时候我们开发微信小程序,都需要先知道状态栏和导航栏的高度,才能去做其他功能 二. 获取微信小程序状态栏高度 用wx.getSystemInfoSync()[官方文档]获取系统信息,里面有个参数:statusBarHeight(状态栏高度),是我们后面计算整个导航栏的高度需要用到的. let res = wx.getSystemInfoSync(); let statusHeight = res.statusBarHeight; // 注意