本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml <view>微信小程序组件：滑动选择器slider</view> <slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/> <view>最小值：{{min}}</view> <view>最大值：{{max}}</view> <view>当前值：{{text}}</view> <view>---------------------------------</view> <vie...
本文实例讲述了微信小程序loading组件显示载入动画用法。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml <loading hidden="{{loadingHidden}}">加载中... </loading> <button type="default" bindtap="loadingTap">点击弹出loading</button>② index.js Page({data: {loadingHidden: true},loadingTap: function(){this.setData({loadingHidden: false});var that = this;setTimeout(function(){that.set...
本文实例讲述了微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml <form bindsubmit="formBindsubmit" bindreset="formReset"><view style="display:flex;"><label>用户名：</label><input name="userName" placeholder="请输入用户名！" /></view><view style="display:flex;"><label>密码：</label><input name="psw" placeholder="请输入...
本文实例讲述了微信小程序实现action-sheet弹出底部菜单功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① index.wxml <button type="default" bindtap="actionSheetTap">弹出action sheet</button> <action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetbindchange"><block wx:for-items="{{actionSheetItems}}" wx:key="{{txt}}"><action-sheet-item bindtap="bind{{item.bindtap}}">{{item.t...
本文实例讲述了微信小程序实现动态改变view标签宽度和高度的方法。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml文件 <view class="view" style="width:{{view.Width}}px;height:{{view.Height}}px;" >我是view标签，我现在的宽度是{{view.Width}}px,高度是{{view.Height}}px</view> <input placeholder="输入view标签的宽度" bindinput="viewWidth"></input> <input placeholder="输入view标签的高度" bin...
本文实例讲述了微信小程序实现点击按钮修改字体颜色功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml文件 <view class="view" style="color:{{color}}">我是view标签</view> <view style="display:flex;"> <block wx:for="{{colorArray}}" wx:key="" wx:for-item="Color"><button class="btn" style="background:{{Color}};" type="default" bindtap="bindtap{{index}}"></button></block> </view>这里...
本文实例讲述了微信小程序实现点击按钮移动view标签的位置功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml文件 <view class="view" style="left:{{viewLeft}}px;">我是view标签</view> <button class="btn" type="default" bindtap="changeLocation">点击我移动view标签的位置</button>index.wxss文件： .view{position: absolute;background: green;color: white;width: 40%;height: 50px;line-height...
本文实例讲述了微信小程序实现点击按钮修改view标签背景颜色功能。分享给大家供大家参考，具体如下： 1、效果展示2、操作步骤： ① 数据绑定view样式背景属性值 ② 通过逻辑文件设置该背景属性初始值 ③ 通过点击按钮修改背景属性值 3、关键代码 index.wxml文件： <view style="background:{{viewBg}};color:white;height:100px;">我是view标签</view> <button type="default" bindtap="changeBg">点击我修改view标签的背景颜色</b...
本文实例讲述了微信小程序实现点击按钮修改文字大小功能。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 index.wxml文件 <view class="view" style="font-size:{{fontSize}}pt">我是view标签</view> <button class="btn" type="default" bindtap="magnifyFontSize">点击我字体变大</button> <button class="btn" type="default" bindtap="shrinkFontSize">点击我字体变小</button>index.js文件 Page({data:{fontSize:1...
本文实例讲述了微信小程序picker组件简单用法。分享给大家供大家参考，具体如下： picker滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器（mode=selector），时间选择器（mode=time），日期选择器（mode=date），默认是普通选择器。 具体功能说明如下： 普通选择器：mode=selector属性名类型默认值说明rangeArray[]mode为selector时，range有效valueNumber0mode为selector时，是数字，表示选择了range中的第几个，...
本文实例讲述了微信小程序自定义toast实现方法。分享给大家供大家参考，具体如下： 一、微信官方默认toast toast最常见了，几乎每个App都有这样的特效，先看下小程序自带的toast效果，立马想死的心都有了~~ 微信自带toast的效果：js文件： wx.showToast({title: 成功,icon: success,duration: 2000 })用法超级简单，但官方小程序有几个问题： 只能显示success、loading两种icon 且icon不可去除 持续时间最大10秒 二、自定义toast 我...
本文实例讲述了微信小程序tabBar模板用法。分享给大家供大家参考，具体如下： 众所周知，微信小程序的tabBar都是新开页面的，而微信文档上又表明了最多只能打开5层页面。这样就很容易导致出问题啦，假如我的tabBar有5个呢？下面是微信原话： 一个应用同时只能打开5个页面，当已经打开了5个页面之后，wx.navigateTo不能正常打开新页面。请避免多层级的交互方式，或者使用wx.redirectTo 因此这几天想着根据微信tabBar数组来自定义模板...
本文实例讲述了微信小程序实现动态设置页面标题的方法。分享给大家供大家参考，具体如下： 1、效果展示2、关键代码 ① WXML文件 <button bindtap="setBiaoTi1">标题1</button> <button bindtap="setBiaoTi2">标题2</button> <button bindtap="setBiaoTi3">标题3</button> <button bindtap="back">还原</button>② JS文件 Page({// 设置标题为：标题1setBiaoTi1:function(){wx.setNavigationBarTitle({title: 标题1,})},// 设置标题...
思路: 用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件 1. 准备工作 安装 3 个依赖: axios, jszip, file-saver yarn add axios yarn add jszip yarn add file-saver2. 下载文件 import axios from axios const getFile = url => {return new Promise((resolve, reject) => {axios({method:get,url,responseType: arraybuffer}).then(data => {resolve(data.data)}).catch(error => {reject(error.toString...
本文实例讲述了jQuery实现的粘性滚动导航栏效果。分享给大家供大家参考，具体如下： 粘性滚动是当导航在滚动过程中会占粘于浏览器上，达到方便网站页面浏览的效果，也是一种用户体验，下面我们看一下是怎么实现的： jQuery的 smint插件，也是一个导航菜单固定插件。当页滚动时，导航菜单会固定在顶部；当点击菜单时，页面会平滑的滚动到对应的区域。 兼容性 由于 smint 使用了 position: fixed，所以它不兼容 IE6。适用浏览器：IE8...