这个场景一般用于展示数据时,数据过多,每条一行显示不下,表头可以横向滑动,下面要显示的数据部分横向纵向都可以滑动.表头或下面数据部分横向滑动的时候,两部分可以进行联动 具体效果像这样(随便写的丑样式布局) 说说原理,主要是使用两个scroll-view组件,然后监听两个scroll-view的滑动事件,然后根据滑动的scroll-view横向滑动的距离,通过scroll-left来设置另一个scroll-view滑动的距离 首先WXML代码: <scroll-view style='width:

onReachBottom: function () { var that = this var limit = that.data.limit var count = that.data.count if(count>limit){ limit = limit + 5 }else{ wx.showToast({ title: '没有更多', icon: 'none', duration: 2000 }) return false } wx.showLoading({ title: '加载中',

历经一年的等待后,小程序在2017年1月9日凌晨终于揭开神秘面纱,正式上线. 微信小程序推广海报 随着小程序正式上线,用户现在可以通过二维码.搜索等方式体验到开发者们开发的小程序了. 用户只要将微信更新至最新版本,体验过小程序后,便可在发现页面看到小程序TAB,但微信并不会通过这个地方向用户推荐小程序. 值得一提的是,小程序提供了显示在聊天顶部的功能,这意味着用户在使用小程序的过程中可以快速返回至聊天界面,而在聊天界面也可快速进入小程序,实现小程序与聊天之间的便捷切换. 微信小程序展示的位置 用

全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序规定屏幕的宽度为750.iPhone6的屏幕宽度为375px,共有750个物理像素,750rpx=375px=750物理像素.1rpx=0.5px=1物理像素. 绝对定位 position: absolute; 相对于父容器进行绝对定位. tabBar用于设置小程序底部的导航栏. color代表ta

全栈开发工程师微信小程序-上 实现swiper组件 swiper 滑块视图容器. indicator-dots 是否显示面板指示点 false indicator-color 指示点颜色 indicator-active-color 当前选中的指示点颜色 autoplay 是否自动切换 false current 当前所在滑块的 index interval 自动切换时间间隔 duration 滑动动画时长 circular 是否采用衔接滑动 false vertical 滑动方向是否为纵向 f

实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理 首先,先看一下这个请求函数 var wx.request({ url: '*****

微信小程序上传多张图片,级小程序页面布局直接来代码index.wxml <view class='body' style='width:{{windowWidth}}px;height:{{windowHeight}}px;'> <view style='padding:40rpx;'> <text class='ttile'>请填写您的意见</text> </view> <view class='inp_1'> <view c

小程序上传wx.uploadFile UploadTask wx.uploadFile(Object object) 将本地资源上传到服务器.客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data.使用前请注意阅读相关说明. num=1;当num==3时,设置按钮隐藏 直接上代码: <view class='uploader' wx:for="{{files}}" wx:key="{{index}}&quo

全栈开发工程师微信小程序-上(下) icon 图标 success, success_no_circle, info, warn, waiting, cancel, download, search, clear <view class="group"> <block wx:for="{{iconSize}}"><icon type="success" size="{{item}}" />&

小程序上传wx.uploadFile UploadTask wx.uploadFile(Object object) 将本地资源上传到服务器.客户端发起一个 HTTPS POST 请求,其中 content-type 为 multipart/form-data.使用前请注意阅读相关说明. url string 开发者服务器地址 filePath string 要上传文件资源的路径 name string 文件对应的 key,开发者在服务端可以通过这个 key 获取文件的二进制内容 header

原理:1:当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和staerY: 2:当触发touchmove事件的时候,再获取此时手指的横坐标moveEndX和纵坐标moveEndY:最后,通过两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 代码: $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.originalEvent.changedTou

问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只找到了选择上传图片的模块(wx.chooseImage),就是找不到文本文件的模块,于是上网查了个遍还是没找到这样的模块,最后查了解决这需求的方法说是要引用外部的 html 游览器上传的方法才能解决,这要怎么引用呢??? 解决方法: 其实微信小程序还是留了那么一条天路,就是可以直接引用HTML页面,

点击下载示例:小程序 - 上拉刷新下拉加载

如果你碰到的上述问题(本地调试ok,小程序上传体验版 各种莫名其妙的问题-卡死-组件属性失效-$apply()不起作用) 您需要关闭 微信开发者工具中: 1.微信开发者工具-->项目-->关闭ES6转ES5. 重要:漏掉此项会运行报错. 2.微信开发者工具-->项目-->关闭上传代码时样式自动补全. 重要:某些情况下漏掉此项也会运行报错. 3.微信开发者工具-->项目-->关闭代码压缩上传. 重要:开启后,会导致真机computed, props.sync 等等属性失效

前言: 最近在研究微信小程序,本人自己是C#写后端的;感觉小程序挺好玩的,就自己研究了一下:刚好今天又给我需求,通过小程序上传多图 然后C#后端保存到服务器: 用NET明白 前端上传需要用到流,然后就接收 保存: 小程序端的比较完整,能上传图片 删除图片 查看图片,文件或者视频也可以: 进入主题: 效果图: c#后端: /// <summary> /// 上传图片 /// </summary> /// <returns></returns> [HttpPos

第一步,下载一个包 npm install kim-vue-touch -s 在当前项目中下载包 第二部 import vueTouch from 'kim-vue-touch' Vue.use(vueTouch) kim-vue-touch提供了点击.长按.左滑.右滑.上滑.下滑等事件, 当你不需要传参时可以通过v-tap="vueTouch"的形式调用方法, 当你需要传参时v-tap="(e)=>vueTouch('点击',e)"的方式调用,e是event

在小程序开发过程中,经常会遇到一些数据无法在text中完全展示,所以会使用到隐藏相关文字,并在后方加上省略号(...). 只需要在对应的text中设置下面的css就可以了. overflow:hidden; //超出一行文字自动隐藏 text-overflow:ellipsis; //文字隐藏后添加省略号 white-space:nowrap; //强制不换行 不过上面的css只能保证单行显示隐藏,如果想要2,3,n行隐藏呢?这个要求其实也是可以通过css做到的.下面贴出css: display

小程序项目中上拉刷新下拉加载是比较常见的需求,官方文档也提供了相当友好的API,但是因为API隐藏的比较深,文档描述也比较模糊所以也折腾了一番(官方文档),在此记录一下使用方式 onPullDownRefresh()  //用户下拉刷新事件,onReachBottom() //用户上拉触底事件 onPullDownRefresh和onReachBottom是小程序的页面事件,官方文档描述”需要在app.json的window选项中或页面的json文件中开启enablePullDownRefres

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

最近做了一款微信小程序,各方面感觉都很完美(萝卜一直这么自信),今天设计总监告诉我你的小程序怎么返回顶部不好使呀,吓得我赶紧拿手机试试,没毛病啊,我手机(苦逼的安卓机)上点两下就回去了呀,遂去找他理论,设计总监拿他手机(高大上的苹果机)当场演示,才恍然,这是又入了大苹果的坑... 啊,说这么多废话好累! 如果发现你的小程序在scorll-view设置了enable-back-to-top为true,在安卓上返回顶部好使,ios上点击状态栏返回顶部不好使,如下图操作即可.

小程序提供了,onPullDownRefresh和onReachBottom两个事件函数监听下拉和上拉事件函数.提示加载中,取消加载中 效果: js文件 // pages/enterprise/enterprise.js var app = getApp(); Page({ /** * 页面的初始数据 */ data: { enterpriseList: [], pageNo: , //页数 pageSize: , // 条数 cityCode: null // 城市编码 }, //查询数据 q