小程序实现瀑布流效果，和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",//...