微信小程序实现tab页面切换功能

wxml <scroll-view scroll-x="true" class="ip_tab_comtainer"> <view class="ip_tab_comtainer_padd"></view> <block wx:for="{{ips}}" wx:for-item="ip" wx:key="{{ip.id}}"> <vi…

一.功能描述在同一个页面内实现不同展示页面的切换功能,如下图所示二.代码实现 1. index.js Page({ /** * 页面的初始数据 */ data: { currentData : 0, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, //获取当前滑块的index bindchange:function(e){ const that = this; that.setData({ currentData: e.d…

微信小程序写tab切换

微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view class="body"> <view class="nav bc_white"> <view class="{{selected?'red':'default'}}" bindtap="selected"…

记录使用微信小程序的NFC和蓝牙功能读取15693芯片的开发历程

开发目标: (1) 对于Android手机,直接通过微信小程序调用手机的NFC功能,对15693协议的芯片进行读写操作: (2)对于苹果手机(及没有NFC模块的手机),通过微信小程序的蓝牙功能连接到蓝牙/NFC读写器,然后通过蓝牙发送指令操作读写器对15693协议的芯片进行读写操作. DAY #1 上午开了半天会,下午开始开发. 先开发简单的:直接通过Android手机的NFC模块读写芯片.开发思路如下: 1. 首先调用 wx.getHCEState(OBJECT), 判断设备是否支持NFC,如…

基于微信小程序的用户列表点赞功能

代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想深入学习微信小程序前后端开发的人员 (2).你需要准备什么? 1.能积极主动学习 , 踏实.不浮躁 2.前端基础(HTML , CSS , JS 基础) 3.一门后端语言 ,例如(PHP , Java , C , C# 等等......) 本人会以世界上最友好的语言PHP讲述小程序的后端接口的数据提…

Java Web项目，Android和微信小程序的初始页面配置

Java Web项目我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发现浏览器会打开一个默认的页面. 这个页面是在什么地方配置的呢? 每个Java Web工程的目录下面,都有一个名为WEB-INF的目录,里面包含一个配置文件web.xml.Web项目的默认页面就定义在里面的welcome-file-list节点里. Android项目我们知道一个Android项目里…

微信小程序滚动tab的实现

微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二手书小程序. 3.效果: A)初始化效果: B)最终效果: 4.实现: 项目结构如下: WXML代码如下: <view class="Hv&quo…

（十二）微信小程序实现登陆页面+登陆逻辑

微信小程序实现登陆页面实现上面两个页面第一个页面 <view>  <view class="top-view">  <view class="user">  <view class="row"> <image class="avatar" wx:if=&…

完整微信小程序授权登录页面教程

完整微信小程序授权登录页面教程 1.前言微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方法.在参考了网路上各种方案之后,实现了用户在授权之后跳转到小程序首页的授权登录页面. 2.实现效果 3.实现思路在进入小程序时先对授权情况进行判断,若已经过授权则直接跳转到首页,若还未经过授权则进入授权页面,点击页面的授权按钮会弹出选择框,选择"拒绝"则不进行跳转,选择"允许&…

微信小程序滚动Tab选项卡：左右可滑动切换

最终效果如上.问题: 1.tab标题总共8个,所以一屏无法全部显示. 2.tab内容区左右滑动切换时,tab标题随即做标记(active). 3.当active的标题不在当前屏显示时,要使其能显示到当前屏中. 一.wxml结构tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现为了偷懒,所以数据都通过wx:for遍历重复出来. 说明:1.设置data-current属性用于:点击当前项时,通过点击事件swichNav中…

微信小程序详解——页面之间的跳转方式【路由】和参数传递

微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navi…

微信小程序之换肤的功能

pc或者移动端实现换肤功能还是比较简单的,大致就是需要换肤的css,还有正常的css:把当前皮肤类型存入本地:然后通过js读取并判断当前应该加载哪套css. 由于微信小程序没有操作wxss的api,所以实现的方式有点不一样,大致如下: 1.需要换肤的wxss,正常的wxss. 2.换肤按钮点击的时候,把当前皮肤的类型存入storage里面. 3.每个页面都引入换肤的wxss(因为换肤每个页面都需要改变). 4.在app.js的globalData里设置默认的皮肤类型. 5.每个页面onload的…

微信小程序之实现页面缩放式侧滑效果

效果图: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 <view class='page {{isFix?"pageShow":"pageHide"}}' > <view class='header'> <view class='h-toggle iconfont icon-list' bin…

微信小程序-滚动Tab选项卡

前言:今天呢给大家详细讲解一下滚动Tab选项卡:左右可滑动切换的效果,希望对大家做项目时候有用! 以前也遇到过这个,但是没有做记录.转载来源于:https://www.jianshu.com/p/94849f9c2ff2 一.wxml结构 tab标题因一排八个,所以使用 scroll-view组件,使其可横向滚动. tab内容可左右滑动切换,使用swiper组件实现为了偷懒,所以数据都通过wx:for遍历重复出来. 说明: 1.设置data-current属性用于:点击当前项时,通过点击事件…

微信小程序笔记<五> 页面管理及生命周期（route）——getCurrentPages()

在小程序中所有页面的路由全部由框架进行管理,而框架以栈的形式维护了当前的所有页面. 当发生路由切换时,页面栈的表现: getCurrentPages() 用于获取当前页面栈的实例,可以把 getCurrentPages() 看做当前小程序所有页面的集合.该集合的第一个元素为首页,最后一个元素为当前页. ps:不要尝试修改页面栈,会导致路由以及页面状态错误. // index/index.js ================================ Page({ data:{"id&qu…

微信小程序开发 [02] 页面注册和基本组件

1.页面注册既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js welcome.json welcome.wxml welcome.wxss 另外需要注意的是,json文件中至少包含空的结构体 { },而js文件中最好包含空的Page({ })方法,否则会编译出错(新版的IDE中对于空的js文件好像已经不再报错,不过还是建议加上) 新建页面到这里就…

微信小程序上传Excel文本文件功能

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

微信小程序背景音频播放分享功能

如果正常背景音频播放的话,只能跳转到自己对应的微信小程序,无法分享朋友圈,我们需要设置分享朋友圈,需要调用一个API 音频背景播放注意:背景播放在锁屏后播放只支持IOS端,安卓端虽然可以播放,但是锁屏不显示,IOS锁屏会显示 wxml <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio…

微信小程序(2)——新建页面

在当前版本中,我们可以快速的新建并且新建页面. 在app.json文件中输入 { "pages":[ "pages/index/index" ] } 输入"pages/index/index" 后,小程序的编辑工具会自动在根目录建立 pages文件夹 index文件夹 index命名的.js .json .wxss .wxml 文件 app.json介绍 app.json是每个小程序必有切唯一的. 使用app.json文件来对微信小程序进…

微信小程序——详细讲解页面传值(多种方法)

1.使用navigator的url带参传值 (1)在pageA页面有一个固定的值要传递到pageB页面,比如说一个固定的值user_id要传递给B <navigator url="../index/pageB?user_id='12345678'">index4</navigator> 注:?后面为你要传递的值这样在pageB页面js的onload函数里面,使用setData方法可以获取到传递过来的值,并将它赋值给pageB页面初始数据在pageB页面的dat…

微信小程序~TabBar底部导航切换栏

底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 对于底部导航栏,小程序上给出的文档要求里面的item最少2个,最多五个. 好了,先看看代码: 在项目中找到这个文件 1 { 2 "pages":[ 3 "pages/index/index", 4 "pages/logs/logs", 5 "pages/mine/min…

使用flex弹性布局代替传统浮动布局来为微信小程序写自适应页面

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_109 我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖 display 属性 + position属性 + float属性,但是浮动布局有一些致命的小问题,比如垂直居中比较费劲,比如著名的float坍塌问题,另外有些极端情况下,还得使用模型+clear:both来手动清除浮动,比较麻烦. 于是,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布…