代码源自于:微信小程序示例官方 index.wxml <block wx:for-items="{{list}}" wx:key="{{item.id}}"> <view class="kind-list-item"> <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show

微信小程序编写新闻阅读列表 不忘初心,方得始终:初心易得,始终难守. 本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期 数据绑定(核心知识) 数据绑定的运算与逻辑 AppDate 区域介绍 事件与事件对象 缓存 列表渲染(核心知识) Template 模板的使用(核心知识) Swiper 组件(轮播图) Swiper官方API文档:https://developers.weixin.qq.com/miniprogr

在web 或者webapp开发中我们习惯了直接饮用本地图片做背景,例如 .aaa { background: url('img/1.png'); } 但是这种引用方式在微信小程序中是无法使用的,控制台会显示如下 不允许使用本地路径. 于是我将路径替换为非本地路径试试: .u-img-leftIcon { background: url('http://192.168.31.163:8020/pr/source/img/searchLeft.png') no-repeat; background-

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

微信小程序有个属性hover-class='active',是指当点击列表元素时当按下鼠标左键会显示active样式,但是鼠标离开样式就会复原.可以参考以下解决方案,直接上代码: wxml: ? 1 2 3 4 5 6 7 8 <view class="taga">  <view class="tag-title">标签</view>  <view class="tag-box">  <vie

微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本:background-image: url("data:image/png;base64,iVBORw0KGgo=..."); 3.为了是背景图片自适应宽高,可以做如下设置: background-repeat:n

本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk719887916/article/details/54312573 上次介绍了小程序开发中的微信登录.文章: 微信小程序开发(一) 微信登录流程, 这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居

wxml文件 <view class="weui-uploader"> <view class="img-v weui-uploader__bd"> <view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image class='weui-uploader__img' src=

1.在js文件里写个界面跳转的事件处理函数gotableinfo,var index = parseInt(e.currentTarget.dataset.index); 为获取当前点击列表的下脚标,wx.navigateTo为小程序提供的界面路由跳转的方法,参数url为要跳转页面的连接(?后面为连接携带的参数) 2.data-index="{{index}}"为标记列表的下脚标,index的来源与wx:for="{{synctable}}"的列表渲染有关   默认

我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径,所有在小程序解析的时候图片不显示,网上搜了好多,说当时图片的时候在解析出来的图片相对路径前面加上域名,这样也挺麻烦的,没到图片的地方都要判断一下,所有我找了个简单粗暴的方法,直接改wxParse的代码,只需要改这一个地方就可以了. 另外附上小程序   wxParse的使用方法 小程序 转换富文本编辑

这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '<img class="rich-img" ' ); 就可以了 rich-text   .rich-img { width: 100% ; height: auto ; }

一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchtap="onSwiperTap" autoplay="auto" interval="3000" duration="500" current="{{swiperCurrent}}" bindchange=&qu

1.data里定义切换图片的地址和切换的标识 data:{ show:true, yes:"http://101.89.144.168:9090//files/jk/yd/images/index/banner-3.jpg", no:"http://101.89.144.168:9090//files/jk/yd/images/index/banner-1.jpg" }, 2.组件里使用三元表达式 <image src="{{show?yes:no}

1.假设加载的数据为 2.wxml <view class="page"> <view class="page__bd"> <view class="weui-cells searchbar-result" wx:for="{{list}}" wx:key="id"> <navigator url="" class="weui-cell

今天需求个类似得到app分类的功能,效果如图: 左右分别滚动,互不干扰,先把简单的布局和样式搭好. <view class="page"> <view class="flex_row"> <view class="nav_left" > <view style="height:1500rpx;">左侧分类</view> </view> <view c

画布提供了一种可以创建圆的方法 arc(x, y, r, s, e, counterclockwise) x,y:圆心 r:圆的半径 s:起始弧度 (0) e:终止弧度 (1.5 * Math.PI) counterclockwise:弧度的方向是否是逆时针 原图 截取之后的图 首先确定图片位置x和y值,然后确定图片大小,r就为图片一半,因为图片起始点是(x,y),所以圆心的位置为(x+r,y+r) var headpic ='../../../images/tabBar_two/dynamic

利用setData局部刷新列表 当列表管理加载到第几页时,这个list的数据有十几条的,如果重新setData的话就要重新刷新和渲染列表, 这是个比较麻烦的事,当数据量大时,就会造成白屏, 这时就要局部刷新列表,而且大量数据使用setData是有性能影响的. 这时就要进行局部刷新了 比如:分页加载,删除某一条记录,这时就要重新加载列表,回到第一页,当频繁操作删除时,就比较恶心了 这时我们可以利用标记,和隐藏记录 通过点击获取列表的索引index,进行删除请求成功后将其隐藏即可,不用全部刷新列表,

SaveCard: function(e) { let that = this; console.log('保存'); var imgSrc = e.currentTarget.dataset.img; //获取相册授权 wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success()

一.新建页面 新建列表页"pages/goodslist/goodslist",新建列表详情页"pages/gooddetail/gooddetail"  二.列表页显示商品列表 1.js文件,查询商品信息,并将查询到的商品信息存放到自定义数组goodslist[]中 2.wxml文件.for循环遍历数组goodslist[],将数组中所有字段的信息展示在页面上 三.列表页绑定跳转事件 1.wxml文件.想要携带id跳转页面,需要在需要跳转的页面wxml文件中添加b

1. 列表渲染 1.1 wx:for 在组件上使用wx:for控制属性绑定一个数组, 即可使用数组中各项的数据重复渲染该组件 默认数组的当前项的下标变量名默认为 index, 数组当前项的变量名默认为item 演示 在index.js中我们定义以下数据 data: { arr: ["路明非", "楚子航", "凯撒", "芬格尔"], }, 编写index.wxml文件代码如下 <!-- 列表渲染测试 --> &l