在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思路:给点击的view增加类,依靠点击的index对state进行赋值.如果相同时,给该view增加类. 实现代码: .wxml文件 <view> <view class='appointent-date'> <view class="appointent-date-di

首先,咱们看一下微信小程序动画怎么实现,我首先想到的是anime.js,但是引入之后用不了,微信小程序内的css也无法做到循环的动态,我就去找官方文档看看有没有相应的方法,哎,还真有 点击这里查看 微信官方文档 简化一下哈:就是这样的 先在js的data里面定义一个动画的值 data: {     animationData: {},   }, 我这边做的是一个箭头图片的旋转 所以wxml里面得元素是这样的 <image animation="{{animationData}}"

如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key 的值以两种形式提供 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变. 保留关键字 *this 代表在 for 循环中的 item 本身

https://www.cnblogs.com/mrszhou/p/7931747.html

接着上篇博客继续. 如下修改: // index.wxml <view>Hello World!</view> <button bindtap="but">点击按钮</button> // 按钮 bindtap属性就是添加点击事件,名字是but // index.js Page({ but: function(){ // 通过but点击事件触发后面的函数 console.log("你好") } }) 保存代码后,点击按

微信小程序新闻列表功能(读取文件.template) 不忘初心,方得始终.初心易得,始终难守. 在之前的项目基础上进行修改,实现读取文件内容作为新闻内容进行展示. 首先,修改 post.wxml 文件,和 post.js 文件中,某些键值对键的名称. post.wxml修改后代码如下 <view> <swiper vertical='true' indicator-dots='true' autoplay='true' interval='5000'> <swiper-ite

微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": "../components/component/component", } } page.wxml <my-component id="myComponent"></my-component> page.js Page({ //... onLoad: fun

在app.json中可以设置所有文件的头部导航颜色 (是window属性的子属性) 在具体页面可以单独设置该页面的导航颜色 (直接写该属性,不需要写window属性) 查看官方文档,可以看到好多全局属性 而页面配置会覆盖部分window配置 在post.json中添加: { "navigationBarTitleText":"文与字" } 可以实现导航的文字 在小程序中,有些时候使用绝对路径会报错,比如import 因此当你使用绝对路径报错时,可以尝试换成相对路径,

场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数. /utils/util.js: function throttle(fn, gapTime) { if (gapTime == null ||

初学小程序,碰到列表与详情页跳转遇到的问题,记录一下. 一.问题 1个列表页: 1个详情页: 列表页代码: onLoad:异步查询数据并setData 详情页代码: 保存成功后,调用navigateBack 问题来了,从详情页跳转回列表页后,页面不刷新,还是修改前的列表. 二.解决过程 1.将详情页保存成功后的代码改为navigateTo列表页 可以刷新了,但是又有新问题,来回在列表.详情页之间切换几次后就点不动了. 原因:wx.navigateTo只能跳转5层,跳转5次后就不能跳了 2.详情页

业务需求: 业务需求是给订单列表添加分页功能,也就是上拉加载这种每次只请求加载固定数量的数据. 需求分析: 对业务来说就是简单的分页上拉加载,但是对于技术实现来说,除了要处理分页数据的累加加载,还要处理操作订单返回列表后需要更新列表数据以同步订单最新状态,其中的难点在于后者. 当然你可以直接重新初始化列表数据(请求加载第一页),但是小程序中会记忆数据重载之前的滚动位置,所以要进行处理使页面滚动到顶部.但是如果订单列表数据比较多,用户操作的订单在第一页之后,那么操作订单后返回列表查找之前操作的订单

1. 超链接导航失效: 小程序规则——wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面

一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生效. ### 1.如何实现其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,如此循环: function throttle(fn,

wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view wx:for="{{array}}"> {{index}}: {{item.message}} </view> Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 使用 wx:for-i

列表渲染存在的意义 以电商为例,我们希望渲染5个商品,而又希望容易改变,我们就要在wxml中动态添加. <view> <block wx:for="{{products}}" wx:for-item="item" wx:key="index"> <view>{{index+1}}:{{item.name}}</view> </block> </view> Page({ dat

wx:for,(wx:for-item,wx:for-index),wx:key. 列表循环包括数组循环和对象循环 一.数组循环 此时控制台报错如下:属性"wx:key"可以提高性能. Wx:key="唯一的值",数组中对象的唯一属性,如id:如果是普通数组,则用*this表示循环项. 此时控制台没有报错. 数组只有一层循环的话,可以只写wx:for和wx:key 二.对象循环 index表示属性,item表示属性对应的值. 循环对象的时候,最好把属性index改为

WXML部分 1 <view class="index"> 2 3 <!-- 数据展示区 --> 4 <scroll-view 5 class="scroll-list" 6 scroll-y 7 style="height: {{windowHeight - bottomHeight}}px" 8 bindscroll="bindscroll"> 9 <view class=&quo

#index.js data: { "messg":"helloworld1111", "items":[ {"name":"张三"}, {"name":"李四"}, { "name": "王五"}, { "name": "赵六" }, ] }, #index.wxml <view&

<div class="list-body" bindtap='openChat' data-Obj='{{oitem}}'> <!-- 头像 --> <div class='list-img'> <div style='margin:10rpx 15rpx 0rpx 15rpx;display:block;'> <image class='cst-img' src="{{oitem.userinfo.avatarUrl}

js代码 Page({ /** * 页面的初始数据 */ data: { words:[] } wxml代码 <view wx:for="{{words}}" class='content-list' wx:key="item" wx:for-index="key"> <view class='content'>{{item.content}}</view> </view>

类似语音,因为都在一个数据内,所以点击第一个,所有的语音都变化,解决方法就是 把整个数据都获取下来,然后更改其中一个需要更改的值,然后再把整个数据都setdata回去,如果需要动画的话,wxml里面放两个组件,一个默认,点击时候隐藏,把另一个显示出来. 例如点击第一个语音,想要播放http://voluntarybanktestapi.wxstar.cn/ResourceTemp…dio/20191011/16bc997be2114b95800ce85d3fb029bb.mp3, 数据 ques