小程序实现瀑布流效果,和web页面差不多,都要经过以下步骤: 1)、加载图片,获取图片的宽高度; 2)、根据页面需要显示几列计算每列的宽度; 3)、根据图片真实宽度和每列的宽度比,计算出图片需要显示的高度; 4)、重新对图片进行定位1、web页面瀑布流效果,先看效果图(瀑布流+无限滚动加载):页面代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta charset=utf-8′> <!--声明文档使用的字符编码--><t...
本来按照事件顺序,小程序初始化时触发App里的onLaunch,后面再执行页面Page里的onLoad,但是在onLaunch里请求获取是否有权限,等待返回值的时候Page里的onLoad事件就已经执行了。 //app.jsApp({onLaunch: function () {console.log(onLaunch);wx.request({url: test.php, //仅为示例,并非真实的接口地址data: {},success: function(res) {console.log(onLaunch-request-success);// 将employId赋值给全局变量,提供给页面做判断t...
1、布局及样式等(1)xml布局 <view class="container"><scroll-view scroll-x="true"><view class="item-content" wx:for="{{list}}" wx:for-item="item"><view class="title">{{item.title}}</view><view class="content">{{item.content}}</view></view></scroll-view> </view> (2)wxss scroll-view {width: 80%;white-space: nowrap; }.item-content {width: 40%;display: inline-block;border: 1rpx solid gray;text-align:...
本文介绍了微信小程序搭建(mpvue+mpvue-weui+fly.js)的详细步骤,分享给大家,具体如下: 微信小程序框架:mpvueui框架:mpvue-weuirequest请求:fly.js1.项目初始化 注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认安装npm了接下到你要建项目的目录下打开cmd窗口(快捷方法:打开到目录后按住键盘shift,然后点击鼠标右键选择在此处打开powershell窗口即可)npm默认从外网下载包,可能会比较慢,可以换成国...
一、 安全区域(safe area) 与iPhone6/6s/7/8相比,iPhone X 无论是在屏幕尺寸、分辨率、甚至是形状上都发生了较大的改变,下面以iPhone 8作为参照物,先看看iPhone X尺寸上的变化:苹果对于 iPhone X 的设计布局意见如下:核心内容应该处于 Safe area 确保不会被设备圆角(corners),传感器外壳(sensor housing,齐刘海) 以及底部的 Home Indicator 遮挡。也就是说 我们设计显示的内容应该尽可能的在安全区域内; 二、h5页面适配 1、...
一、摘要小程序中我们会经常使用到this.data与this.setData。其中this.data是用来获取页面data对象的,而this.setData是用来更新界面的。那么他们之间的区别与联系你真的搞懂了吗? Page.prototype.setData()setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。 注意: 直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。...
本文为大家分享了微信小程序框架wepy之动态控制类名的具体实现方法,供大家参考,具体内容如下 控制类名 style<style lang="less" scoped>.liBkgCor {background-color: red;} </style>template<view class="t_tab"><li @tap.stop="changeLi({{1}})" class="{{ liColor == 1 ? liBkgCor: }}">推荐</li> <li @tap.stop="changeLi({{2}})" class="{{ liColor == 2 ? liBkgCor: }}">洗手台</li> <li @tap.stop="changeLi({{3}})" clas...
这里的微信小程序动态加载是以按钮为例,主页面点击不同的按钮进入不同的子页面中,根据主页面的title来动态加载子页面按钮的数量以及值。 效果图:wxml文件(注意wx:key="item"要写,不然它会有警告): <!--pages/plan/plans/plans.wxml--> <view class="className" style="background-color: rgb(225, 218, 211); height:{{className_height}}px" wx:for="{{array}}" wx:key="item"> <button class="items" id="{{stv.id[index]...
就在昨天,微信宣布了微信小程序开发者工具新增“云开发”功能 下载最新的开发者工具,现在无需服务器即可实现小程序的快速迭代! 分类功能和搜素功能的效果图1.首页分类功能的实现 boxtwo方法(.js文件) boxtwo: function (e) {var index = parseInt(e.currentTarget.dataset.index)this.setData({HomeIndex: index})},当在首页点击 分类导航时,会触发这个方法,并传回当前点击时的index值。 这个方法实现的是将.wxml文件传来的...
本文实例为大家分享了微信小程序实现tab左右切换展示的具体代码,供大家参考,具体内容如下分析 1、设置data-current属性用于:点击当前项时,通过点击事件swichNav中处理e.dataset.current取到点击的目标值。 2、swiper组件的current组件用于控制当前显示哪一页 3、swiper组件绑定change事件switchTab,通过e.detail.current拿到当前页 wxml:<view class="record-box"><view class="nav"><scroll-view scroll-x="true" class="nav...
先自己绘制了一个丑陋的原型图,然后开始在小程序上绘制页面,然后设计样式,一路过来总结就是哪里不懂查哪里之旅~ 原型设计和分析 原型图效果文章详情.png 为什么要这么设计? 正常情况下是设计先出设计图,然后服务器和我们一同讨论接口如何设计,然后根据服务器返回的结果,我们再去界面上显示。但是这里我们使用的是第三方的接口,所以只能他有什么我们显示什么了。 服务器接口返回的数据如下如:小程序-服务器返回结果.png 分...
1:Flex布局 Flex布局如图1所示图1 1.1 Flex容器属性1.2 Flex容器内元素属性align如果定义会覆写掉容器属性中的justify-content,align-items设置的属性 微信小程序开发工程中,新建文件layout,然后新建各种文件(以layout命名), 在layout.wxml中加入如下代码: <view class="container1"><view class="item1">1</view><view class="item1">2</view><view class="item1">3</view><view class="item1">4</view></view>在layout.w...
部署环境: jdk1.7mysql5.6tomcat7centos6.51资料准备 1)linux服务器,推荐使用阿里云,这里预算有限,所以使用了香港的低配服务器。 2)域名,这里是在阿里云平台上申请的,没有申请到cn,因为身份证信息和网上查询的有问题,我是转到学校的,所以没有审核通过。这里使用的是国际域名。通过审核才能用哈。 3)ac证书,这里也是在阿里云平台申请的,一年免费版,要绑定域名哈,这里直接使用最方便的针对tomcat的证书,人多的话就是用...
屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法 微信小程序这里提供了两个API wx.createContext() 创建并返回绘图上下文context对象 getActions 获取当前context上存储的绘图动作,对应wx.drawCanvas(object)中的actionsclearActions 清空当前的存储绘图动作wx.drawCanvas(object...
本文为大家分享了微信小程序swiper组件创建轮播图的具体代码,供大家参考,具体内容如下 一、视图容器(Swiper) 1、swiper:滑块视图容器 微信官方文档二、swiper应用 1、页面逻辑(index.js) Page({data: {imgUrls: [{link: /pages/index/index,url: /images/001.jpg}, {link: /pages/list/list,url: /images/002.jpg}, {link: /pages/list/list,url: /images/003.jpg}],indicatorDots: true, //小点indicatorColor: "white",//...