https://www.cnblogs.com/miu-key/p/7606024.html

效果图:横向滚动和纵向滚动 scroll view使用方法文档,前面已经介绍查找文档方法,此处不再赘述 一.横向滚动 创建一个页面scroll-nav 然后,在.wxml文件中排版 <!--水平拖动新闻--> <scroll-view scroll-x class="menu"> <view class="scroll-nav"> <navigator url="">社会新闻</navigat

简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会好很多,我这里只是一个小demo,没有怎么去考虑数据的问题,主要是想着去实现这么个功能,有可能后期引入数据后会出现问题,欢迎提出互相讨论 解决过程 1.在想要实现这个问题的时候找了不少别人的博客看,主体页面布局方面是比较统一的,tab导航栏使用<scroll-view>标签,内容使用<swi

//一般在PC上我们要分页都是通过上一页和下一页来实现的,手机通过当下滑到一定程度的时候自动加载下一页面//实现思路:首先加载部分数据,当下滑到某个元素可见的时候,如果还有数据,则新发送请求,然后追加在当前页面 一.PC端 /* *<div class='topicBox' id='listBox'> *</div> */ //判断元素是否进入可视区域 function see(objLiLast) { //浏览器可视区域的高度 var see = document.documen

主要原理:使用 <swiper> 和 <scroll-view> 组件 代码片段: https://developers.weixin.qq.com/s/mLx4FWmF757Z GitHub: github.com/WozHuang/Miniprogram-Demo 小程序是轻量级的app,本应小巧精悍.用完即走,但是很多企业还是想要在这辆自行车上装发动机,要求拥有原生APP的操作体验.作为一介码农也只能默默想办法实现了,总不能说这东西我不想做吧 有兴趣可以在Github看看另外

所提及的购物数量的加减,现在说说商品属性值联动选择. 为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <view class="title">商品属性值联动选择</view> <!--options--> <view class="commodity_attr_list"> <!--每组属性--> &l

wx.createSelectorQuery().select('#box').boundingClientRect(function (rect) { width = rect.width height = rect.height top = rect.top }).exec() 如上,拿到了id为box的view,并获取到了它的宽.高等属性,此段代码要放在onReady函数中 注意:如果这个view的宽高是随着内容而变化的话,这样获取到的宽高就有可能还是渲染完成前的值,不知是不是小程序自己的

最近在做一个导航的时候,发现使用overflow-x: auto来做多内容滑动导航效果很不好,思索是不是可以使用swiper来做一个,研究了下其实发现原理基本相同 这里说下,要用swiper做导航菜单,有几个要特别注意的参数 1:autoplay,官方说明[是否自动切换],这个不填,菜单可不能自己动 2:indicator-dots ,官方说明[是否显示面板指示点],这个也不填, 3:display-multiple-items,官方说明[同时显示的滑块数量],敲重点,这个参数必须设为1,要与p

今天另起一篇,贴出完整的代码,大概思路是左侧大分类列表,点击后联动右侧二级分类,及下面文章列表,点击二级分类也联动下面文章列表. 代码如下: <view class="page"> <view class="flex-row"> <!--左侧栏--> <view class="nav_left" > <block wx:for="{{leftList}}" wx:key=&

最近做一个项目,由于用到了竖向swiper,导致占用屏幕过大,用户滑动总是滑动到swiper组件,页面无法向下拉动,于是找各种办法禁止用户手动滑动swiper组件. 经过网上一番查找,网友们也是闹洞大开,各种方法都想出来了,有用透明蒙层覆盖的,这不失为一种很好的解决办法,但是如果swiper上有元素需要点击就没有办法了. 继续查找,于是找到了用  catchtouchmove  事件来截获用户手动滑动事件,这样既解决了禁用用户手动滑动,有解决了有点击按钮不影响使用 贴代码: WXML: <swi

一:testscroll.wxml的代码如下.testview.js自动生成示例代码 //testscroll.wxml <view class="section__title">横向滚动</view> <scroll-view scroll-x="true" style="height:240px;white-space:nowrap"> <view class="scroll-view-it

页面wxml <!--page/index/index.wxml--> <view id='demo'> <text>哈哈哈哈哈</text> <view>哈哈哈哈哈</view> </view> js文件 onLoad: function(options) { //创建节点选择器 var query = wx.createSelectorQuery(); //选择id query.select('#demo').boun

1.顶端固定核心代码如下: <view class="page__hd" style="position:fixed; top:0;width: 750rpx;"> ......</view> 2.底端固定核心代码如下: <!-- 底部固定 --><view class="page__hd" style="position:fixed; bottom:0;width: 750rpx;"

一.在app.js利用官方方法获取设备信息,将获取到的screenHeight.windowHeight度量单位统一由rpx换算为px 注:官方文档给出 [rpx换算px (屏幕宽度/750)  ][ px换算rpx (750/屏幕宽度)] App({ onLaunch: function() { wx.getSystemInfo({ success: res => { this.globalData.systemInfo = res this.globalData.windowHeight =

hover:class  :定义容器在被触发时的样式 通常无用,但若不去除则影响用户体验: 为避免被覆盖,约定在wxss底部添加class,比如: <!-- wxml --> <navigator class="index-nav_box" hover-class="noshadow"> <image></image> <view class="index-nav-des">现采蓝莓1斤

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源

本文转自:http://blog.csdn.net/michael_ouyang/article/details/70755892 续上一篇的文章:微信小程序之商品属性分类  —— 微信小程序实战商城系列(4) 自从认识某人后,我收获了两个成功.登录成功.付款成功,而且还拥有了自己的一辆车: 购物车 也发现了自己的不足之处: 余额不足. 为大家介绍的就是购物车 这里演示从商品列表中添加到购物车 下面先做商品列表页.如下图: 布局分析: 首先一个list的主盒子,接着是item盒子,这是必须的.

本文转自:http://blog.csdn.net/michael_ouyang/article/details/70194144 我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="

本文转自;http://blog.csdn.net/michael_ouyang/article/details/56846185 loadmore 加载更多(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的角度来考虑,后台不要一次性返回所有数据,当用户有需要再往下翻的时候,再加载更加数据出来. 业务需求: 列表滚动到底部时,继续往上拉,加载更多内容 必备参数

(1)视图容器 名称 功能说明 movable-view 可移动的视图容器,在页面中可以拖拽滑动 cover-image 覆盖在原生组件之上的图片视图 cover-view 覆盖在原生组件之上的文本视图 movable-area movable-view的可移动区域 scroll-view 可滚动视图区域 swiper 滑块视图容器 swiper-item 仅可放置在swiper组件中,宽高自动设置为100% view 视图容器     ①movable-view 可移动的视图容器,在页面中可以

「小程序」这个划时代的产品发布快一周了,互联网技术人都在摩拳擦掌,跃跃欲试.可是小程序目前还在内测,首批只发放了 200 个内测资格(泪流满面).本以为没有 AppID 这个月就与小程序无缘了,庆幸的是微信这两天发布了正式版开发者工具,无需内测邀请也可以尝鲜了. 因此也就有了我与「小程序」的初体验,而我的感受只有一个字——爽! 选择哪个「小程序」Demo? 在知名同性交友网站 Github 上,「小程序」的 Demo 不少,但是大多只是简单的 API 演示,有的甚至直接把页面数据写在了 json