javascript技巧

viewer.js是实现图片预览的插件库,要在项目中使用它里面的功能,首先要引入两个文件: 1.css文件:viewer.css 2.js文件:viewer.js 可以在这里下载 下载后,在html中引入 <link rel="stylesheet" type="text/css" href="./viewer.css" rel="external nofollow" /> <script src="

本文实例为大家分享了支付宝小程序实现省市区三级联动的具体代码,供大家参考,具体内容如下 背景 最近做的项目 有省市区联动.不仅要传name还要把对应的id发给后台. 支付宝提供的级联有 my.multiLevelSelect和picker并不能满足需求. picker 组件不支持多列选择,所以使用 picker-view 组件和Popup配合使用. 实现效果图 数据结构 citys - 城市 areas - 区 当然这是处理之后的,行政区划树 不长这样子. [{ code:1, name:'北京

本文实例为大家分享了微信小程序分享朋友圈海报的具体代码,供大家参考,具体内容如下 思路:生成朋友圈海报放在公共文件,首先需要绘制canvas,点击分享朋友圈按钮,在手机屏幕看不见的地方(定位left:1000px)绘制出canvas,绘制完成将canvas转为图片显示.点击保存按钮,将本地缓存路径的图片下载到手机相册,在这里需要进行授权处理 untils.js文件 // 参数说明: mainImg 商品图 headImg 微信头像 onshareImg 二维码 goodsName 商品名称 go

本文实例为大家分享了小程序Scroll-view上拉滚动刷新数据的具体代码,供大家参考,具体内容如下 因为项目需求,我需要做一个上拉刷新,但是我不是小程序的原生刷新生命周期函数事件 小程序scroll-view,有一个滚到底部触发事件bindscrolltolower加粗样式 把自己需要滚动的内容放在这个scroll-view之间,然后.给scroll-view一个滚动高度 首先先看一下效果图吧 order.wxml页面 <scroll-view class='scroll' scroll-y=

本文实例为大家分享了微信小程序实现选择地址省市区三级联动的具体代码,供大家参考,具体内容如下 微信原生地址API,缺少省市区code,因此自己写了一个收货地址 思路:在onload预先加载全部省和第一个省的全部市和区,加载全部会导致几秒的事件阻塞.点击选择地址弹窗后,按需加载操作,滑动省加载对应的市和第一个市对应的区,滑动市加载区,滑动区只更改区的值 onLoad: function(options) { var that = this; // 此文件为全部省以及第一个省的市和区 var cit

选项卡的功能用途有很多地方:例如商品评论的切换,还有文章分类还有各种各样的切换功能需要用到.这个实现是通过for循环,取数值下标的方式来实现切换 test.wxml <view class='content'> <view class='tab {{idx == index? "type-item-on" : ""}}' data-index='{{index}}' catchtap='tab' wx:for='{{tab}}' wx:key='k

本文实例为大家分享了小程序背景音乐,供大家参考,具体内容如下 我做这个项目的需求,用到一个背景音乐的播放和暂停: 当用户点击进入音乐界面的时候用户需要手动点击播放对应的音乐,那么播放以后推出音乐界面这个音乐还是处于播放状态,以及音乐的图标的状态也一个是播放.so看看代码吧! 那这里用到了一个新的api 知点,wx.createInnerAudioContext,可以参考小程序官方文档 wx.createInnerAudioContext 具体属性 innerAudioContext.autopl

本文实例为大家分享了微信小程序实现多图上传的具体代码,供大家参考,具体内容如下 前言 纯属是笔记,复用性太高,前后端封装的上传的多图方法 看一下效果图 index.html <view class="imgs"> <block wx:for="{{ imgs }}" wx:key="{{ index }}"> <view class="img-box"> <image src=&quo

这个是ES6的箭头函数,res =>可以理解为function(res) 箭头函数的最大好处就是省略了var that=this 从而将this改为静态. var 函数名 = 参数名 => 返回值; var f = v => v; //等同于 var f = function(v){ return v; }; 如果不需要参数或有多个参数,要使用圆括号 var f = () => 5; var sum = (num1,num2) => num1+num2; 如果函数的代码多于一

用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD

微信小程序报错 VM1305:1 thirdScriptError Cannot read property 'name' of undefined TypeError: Cannot read property 'name' of undefined     at z (http://127.0.0.1:38175/appservice/__dev__/WAService.js:2:1560728)     at Ie (http://127.0.0.1:38175/appservice/__

选项卡tab和swpier之间的套用,供大家参考,具体内容如下 其实我之前写过一篇选项卡的切换demo,大家阔以参考一下 小程序多个选项卡切换 那今天写这个demo呢,是因为项目需求,所以仅供参考. 首先,我是拿到了home.wxml的数组下标,通过url传参的方式去将这个数组id传到下一个页面,下一个页面接收以后再将id赋值给对应的tab或者currentId(swiper 的下标) 实现上一个页面进来以后直接进入对应的页面. 首先看一下效果图吧 当我点击违章查询 跳转到对应的页面展示对应的内

本文实例为大家分享了小程序表单认证布局及验证的具体代码,供大家参考,具体内容如下 tset.wxml <view class='form'> <view class='content'> <view class='left'>姓名:</view> <view class='right'> <view class='right-left'> <input placeholder='请输入真实姓名' bindinput='getNa

Spread运算符 允许从 iterable 表达式(如另一个数组文本)初始化部分数组文本,或允许表达式扩展到多个参数(在函数调用中). 语法 var array = [[arg0ToN ,] ...iterable [, arg0ToN]] func([args ,] ...iterable [, args | ...iterable]) 参数 iterable 必需. 迭代对象. arg0ToN 可选. 数组文本的一个或多个元素. args 可选. 函数的一个或多个参数. 本文将带大家了解如

本文实例为大家分享了js实现文字跑马灯效果的具体代码,供大家参考,具体内容如下 思路: 1.判断文字的长度和容器的长度,如果文字长度大于容器长度,则开始滚动,否则不滚动. 2.获取滚动条到元素左边的距离,递归滚动,直到滚动后的距离等于文字的长度退出递归. 判断文字和容器的长度可以通过offsetWidth来判断.如果文字长度大于容器长度,则开始滚动. window.onload = function(){ //比较文字与盒子长度的大小 if(boxWidth>textWidth){ return

微信小程序返回上一级页面 wx.navigateBack({ delta: 1 //返回上一级页面}) html: <view class="refusea_btn"> <van-button type="primary" size="large" bind:tap="submit">保存</van-button> </view> js: //提交 submit(){ let d

先上代码: wxml: <!-- 顶部搜索框 --> <view class="inputcontainer"> <view class="input" catchtap="inputSwitchStatus" wx:if="{{!edit}}">搜索商品</view> <view class="edit" wx:else> <form bi

壹 ❀ 引 我们都知道,JS代码的执行顺序总是与代码先后顺序有所差异,当先抛开异步问题你会发现就算是同步代码,它的执行也与你的预期不一致,比如: function f1() { console.log('听风是风'); }; f1(); //echo function f1() { console.log('echo'); }; f1(); //echo 按照代码书写顺序,应该先输出 听风是风,再输出 echo才对,很遗憾,两次输出均为 echo:如果我们将上述代码中的函数声明改为函数表达式,结

先看效果图: 这个滑块除了可以点击上方的导航,还可以左右切换页面,随之导航也跟这切换. 实现步骤: 编写滑块视图代码 编写逻辑代码 wxml: <view class="content"> <view class="title"> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="sw

最近工作当中再一次遇到要实现一个车辆列表,要求能够像微信通讯录一样,实现右侧滑动,点击功能,并且滑动过程中,能够有提示.原来用jquery实现过一次,为了精简代码,现在用原生的实现一次.想必工作中大家都能用上,所以就临时谢了一个小案例,分享给大家.本案例重在分享移动端的实现思路,代码和样式可能没有优化,大家见谅. 原本微信通讯录效果: 本案例效果图: 实际工作中可以实现类似于城市列表,产品字母排序这种需求: < p>代码展示 Dom Dom结构仅供参考,实际情况看自己需求,比如我现在工作当中使