代码源自于:微信小程序示例官方 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

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

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

微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view class="header"> <view class="nav_i"> <text class="nav_tex">更多内容</text> </view> <view class="n

在微信小程序里面没有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

在微信小程序中要保存图片到本地相册,需要获取相册权限. 总之整个功能实现下来需要如下几个小程序的API:wx.getSetting,wx.authorize,wx.openSetting,wx.downloadFile,wx.saveImageToPhotosAlbum 但是在openSetting 和 downloadFile 会有坑! openSetting,[打开小程序设置页]有坑,是官方的问题,这里出现授权弹框,如果你点击拒绝再次引导授权流程弹框不会立马弹出(官方解释说因为频繁代用授权会

最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码 wxml代码: <scroll-view scroll-y style="height: 1000rpx;" scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun"> <blo

作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文件 data: { one:"block", //判断图片全屏前是否隐藏 ones:"none", //判断图片全屏后是否隐藏 phoneheight :" " , //按比例缩放后图片高 phoneWidth : " "  //

动态效果如下: 就是默认只显示4行,点击展开的按钮显示全部,再点击隐藏. 主要通过css来控制 主要的css: .flex-text{ margin-top: 10px; display: -webkit-box; -webkit-box-orient:vertical; text-overflow: ellipsis; overflow:hidden; } .flex-text.text-hidden{ -webkit-line-clamp:; } .flex-text.text-show{

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

首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式 wxml: <view> <view wx:for="{{list}}" wx:key="num" class="list" > <text bindtap='changColor' data-index='{{index}}' class='{{item.check?"text-active&quo

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

拿接口  有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数

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

<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image> </view> </view> Page({ /** * 页面的初始数据 */ data: { imgArr:[ 'http:

wxml部分的代码   <view class="footer-r" bindtap="save"> <image src="../../../images/icons/zhiwen.svg" /> <view class="footer-r-t"> <text>点击保存到相册</text> <text class="t">享更多优惠&

类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key="id" wx:for="{{helpCateList}}" wx:for-item="item">

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()

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