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

代码地址如下:http://www.demodashi.com/demo/14044.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 我们在学习微信小程序或者做项目时,应该会遇到滚动通知效果情况,那么这个滚动通知功能我们应该怎么编写呢? 今天我们说下微信小程序滚动通知效果的实现,今天我们就分享这样的小教程.希望对大家有所帮助 2.案

最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息 2.screenHeight - windowHeight 计算标题栏高度 3.标题栏高度 , , app.js //app.js App({ onLaunch: function () { var that = this wx.getSystemInfo({ s

最近使用微信小程序开发的时候,需要用scroll-view的bindscrolltolower事件,控制加载下一页的内容.但是发现在ios里,下拉滚动一次,事件触发两次,导致重复加载数据. 经过百度和亲身试验,可以采用用bool变量控制的方法解决这个问题: 1.在data中定义bool变量 //是否正在处理滚动事件,避免一次滚动多次触发 isScrolling:false 2.bindscrolltolower事件处理函数中,进入时判断是否正在处理,并设置isScrolling值为true:退出

微信小程序开发工具出现如下问题: 因为网络代理软件或者 VPN 影响,工具无法加载本地模拟开发服务  请尝试以下任一解决方案1.关闭相关网络代理软件,重新编译成功后,再启动相关网络代理软件: 2.配置相关软件不针对 *.appservice.open.weixin.qq.com 和 *.debug.open.weixin.qq.com 进行代理: 3.配置相关软件不针对 开发者工具 做代理 但是根本没用任何代理,找了很多方法,最终解决: 设置windows防火墙,允许微信web开发者工具使用网络

QQ讨论群:785071190 安装开发工具 前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 <开发者工具介绍> .工具安装非常简单,只需要双击安装(下一步....).安装完成后可以在桌面看到以下图标. 使用 1.打开"微信web开发工具",扫一扫进入开发界面 2.选择小程序项目,点击右上角加号"+"新增项目,如果没有注册小程序账号点击"小程序/游戏",填写好项目目录和注册名

wechat-common-sdk ? 场景:目前工作中的项目需要包含并使用另一个项目. 也许是第三方库,或者你独立开发的,用于多个父项目的库. 现在问题来了:你想要把它们当做两个独立的项目,同时又想在一个项目中使用另一个. 我们举一个例子. 假设你正在开发一个网站然后创建了 Atom 订阅. 你决定使用一个库,而不是写自己的 Atom 生成代码. 你可能不得不通过 CPAN 安装或 Ruby gem 来包含共享库中的代码,或者将源代码直接拷贝到自己的项目中. 如果将这个库包含进来,那么无论用何

官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 下拉选择,时间选择,城市选择,多项选择. 1.index.js中: //index.js //获取应用实例 const app = getApp() Page({ data: { //设置初始值 array: ['中国', '美国', '巴西', '俄罗斯'], objectArray: [ { i

先看看大概效果 1.首先需要了解微信API:          wx.createIntersectionObserver(Object component, Object options) 创建并返回一个 IntersectionObserver 对象实例.在自定义组件或包含自定义组件的页面中,应使用 this.createIntersectionObserver([options]) 来代替 具体可以看微信小程序文档 2.由于我们这个区域是一个滚动区域,所以我用了scoll-view,最外层

1.需要用到的组件和api scroll-view(可滚动视图区域) wx.showToast(OBJECT)显示消息提示窗----显示loading小菊花用的 2.需要用到的属性 3.scrol-view需要指定一个高度,这个高度可以按自己的需求计算,我使用的是屏幕可用高度并且默认一页显示6个 4.滚动到底部绑定需要触发的事件 <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='

首先是轮播图,autoplay 自动播放,interval 轮播的时间,duration 切换速度,可以根据自己需求去添加. Delete:是删除按钮,加载进来是隐藏的,需用户点轮播图进去后,轮播图全屏显示才出来. noClickImg 与 ClickImg:切换全屏与非全屏轮播图,绑定了点击事件 changeClick 来切换,只是改变样式即可. Block:图片列表. Number_img:当前轮播 index(currentNumber),与图片 length 集合(cardnum). 其

下载 第一步:百度搜索"微信公众平台" 第二步:登录微信公众平台 第三步:点击微信开发者工具 第四步:按照自己的操作系统下载对应的版本的开发者工具,我的是Windows10 64位的操作系统 安装 下载成功后,双击安装 OK.

最近在做个直播间,有个这样的需要,就是进入到页面,<scroll-view>需要滚动到最底部,并且发送消息之后自动的滚动到底部. 开始想着计算里面内容的高度,然后通过设置 scroll-top 的值,达到这个效果.在网上搜一圈,大多也是采取的这种方案.但是感觉这个方案略麻烦.想另寻一条解决方案. 后面看官方文档有个scroll-into-view的属性,如下图: 想着,滚动到底部不就是滚动到最后一条数据嘛~遍历数据的时候给每条数据添加一个id,设置scroll-into-view的值为最后一条

<view class='notice-wrap' hidden='{{hideNotice}}'> <view class='tongzhitext'> <text class="tongzhi-text">{{notice}}</text> </view> <view bindtap='switchNotice' class="closeView">x</view> </v

参考网址:https://www.cnblogs.com/Smiled/p/8203306.html 1.wxml: <view class='myScroll' style='float:left;'> <scroll-view scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower' > <!--分类 下部分 图文列表 --> <view class=&quo

底部导航(要在app.js里面配置,也就是把导航的代码写到app.js) 官方文档说最少2个导航最多5个 , "tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "black", "list": [ { "selectedIconPath&q

JS data: { // 初始化滑动条数据 menuIndex:0, // 每个菜单的宽度 onlyWidth: 70, // 右侧的margin marginWidth:10, // 菜单总长 menuWidth:0,   lists:[ { list: 'a1' }, { list: 'a2' }, { list: 'a3' }, { list: 'a4' }, { list: 'a5' }, { list: 'a6' }, { list: 'a7' } ], }, jumpIndex:f

<scroll-view scroll-x="true" style=" white-space: nowrap; display: flex" > <view class="acvitity" ></view> <view class="acvitity" ></view> <view class="acvitity" ></v

解决方法: pages对象添加该页面

页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selectViewport().scrollOffset() query.select("#comment").boundingClientRect(); query.exec(function (res) { console.log(res); var miss = res[0].scrollT

<1>xml文件 <view> <scroll-view scroll-x class="scroll-header"> <view class="wrap1" wx:for="{{lists}}"> <text class="textLine2">{{item.name}}</text> </view> </scroll-view>