
微信小程序
空空的瓶子酱
这个作者很懒,什么都没留下…
展开
-
微信小程序列表页分页加载功能
微信小程序做分页加载数据,会做一些下拉加载更多、然后上拉刷新的操作。数据放在一个for循环里去加载,数据源是一个数组对象。在加载下一页数据时,将下一页的数据拼到当前数组后面。代码如下:wxml代码<scroll-view class="scrollview"> <block wx:for="{{list}}" wx:key="index"> <v...原创 2020-04-01 15:07:47 · 4083 阅读 · 0 评论 -
微信小程序setData修改数组某一项的值
官方文档示例:changeItemInArray: function() { // 对于对象或数组字段,可以直接修改一个其下的子字段,这样做通常比修改整个对象或数组更好 this.setData({ 'array[0].text':'changed data' }) },这种方法对于静态的数据设置有效,但是对于动态的数据,不起作用,会报错。解决...原创 2020-04-01 00:10:20 · 10245 阅读 · 4 评论 -
微信小程序购物车功能
一个购物车展示的是一个列表(carts),列表里的单个item包含:商品id(id),商品图(image),商品名(title),单价(price),数量(amount),单选按钮(selected);全选按钮,需要一个字段(selectAllStatus)表示是否全选;总价(totalPrice);总数量(totalNum)。还有一个需要判断的是购物车是否为空(hasList)。购物车主要有...原创 2020-03-29 21:53:13 · 1522 阅读 · 0 评论 -
微信小程序本地json数据在页面展示
新建一个json文件,使用module.exports定义出口,要不然其他文件读取不到json数据。还有一个需要注意的小细节,本地json数据放在js文件里面,不是json文件,不然会报错。// 本地模拟json数据var jsonData = [ { "id":1, "name": "Tom1" }, { "id": 2, "name": "Tom...原创 2020-03-29 10:43:31 · 2404 阅读 · 0 评论 -
微信小程序提交表单清空输入框
这里简单记录两种方法:一、在input中绑定对象value,在提交成功后的回调中重新设置值为空。个人觉得这种方式适合表单数据比较少。wxml代码<form bindsubmit="submitForm"> <input name="title" maxlength="20" value="{{title}}" /> <input name="t...原创 2020-03-26 22:37:09 · 6285 阅读 · 4 评论 -
微信小程序 用户授权登录
微信小程序弹窗授权,使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。自己练手写的代码,有可能实际项目中这种写法不能通过审核,代码如下:wxml:<view wx:if="{{isHide}}"> <view wx:if="{{canIUse}}" > <view class='h...原创 2020-03-26 11:24:25 · 1310 阅读 · 0 评论 -
小程序避免多次点击重复触发事件
当用户点击按钮或控件时,如果响应比较慢,往往会重复点击,另外也会存在用户故意反复快速点击的情况,这种时候就会多次触发点击事件造成非期望的结果。如何解决或避免这个问题呢?一般来说有两种情况。 1、点击事件是执行请求 这种情况下可以在请求执行之前显示一个模式的加载框,请求完成后再关闭加载框,由于小程序在1.1.0版本基础库才支持wx.showLoading,因此需要对低版本做兼容处理,代码如下:fu...转载 2020-03-24 23:26:51 · 1410 阅读 · 0 评论 -
小程序用户收货地址修改
页面使用的是weui的组件。主要实现的思路:1、从地址管理页跳转过来,在onload里面将传过来的参数address获取后,渲染到前台页面;同时将address数据缓存到本地;2、修改地址后提交,提交的数据与缓存中的数据值比对。注意点:从上一个页面中传过来的参数是对象转的字符串,当前页要转其转为json对象,方便获取数据。【JSON.stringify()将对象、数组转换成字符串;JSON....原创 2020-03-24 21:47:38 · 5390 阅读 · 1 评论 -
微信小程序 带参数返回上一页
开始碰到这个问题是在订单页中的地址显示问题,新增地址要把地址传回去展示。开始不知道如何操作,网上查到了相关方法,在此简单做个记录。订单页wxml<view class="address-box" wx:if="{{!hasAddress}}"> <!-- 没有地址时显示新增地址,有地址时选择地址或者去修改地址 --> <view class="go...原创 2020-03-24 11:00:47 · 542 阅读 · 0 评论 -
小程序 通过id从列表页跳转到对应的详情页
从列表页通过id跳转到对应的商品详情页,可以使用 navigator来跳转链接,也可以绑定函数来实现。直接使用navigator跳转<block wx:for="{{productList}}" wx:key="productId"> <navigator url="/pages/good-detail/good-detail?productId={{item.produ...原创 2020-03-24 09:04:33 · 9103 阅读 · 4 评论 -
小程序scroll-view实现锚点跳转
在微信小程序中,使用 scroll-view 实现长页面的锚点跳转。主要是使用 scroll-into-view属性, 在这里做个记录。wxml<view class="tab-section" > <view class="{{activeView =='productBox' ? 'active':''}}" bindtap="toViewClick" data-...原创 2020-03-23 22:53:29 · 1202 阅读 · 0 评论 -
微信小程序tab切换
wxml<view class="nav-box"> <!-- tab框 --> <view class="nav-tab"> <view wx:for="{{navList}}" wx:key="index" data-current="{{index}}" class="item {{currTab == index? 'active...原创 2020-03-25 13:51:15 · 613 阅读 · 0 评论