小程序-列表块/类式ul-li格式(1)
摘要
目前列表能布局出来,但是目前我个人还没解决的问题是:如果每个列表块都有详情页怎么解决呢?
1:我的效果图
2.正常的每个都能点击的html
注:上面的代码确实能够实现我的每个【menu2_view】都能点击成功进入每个对应的详情页。但是我个人认为还存在的问题是:相同的代码太多,相同列表一多,容易拖慢页面的加载。
2:小程序模块
<view class="menu2">
<view class="menu2_view" wx:for="{{arry}}" wx:key="">
<image src="{{item.src}}" mode="widthFix" class="menu3icon"></image>
<text>{{item.text}}</text>
</view>
</view>
js:
Page({
data:{
arry:[
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
]
}
})
最新调整2018-2-26 好吧上面的问题现在知道怎么解决了,以下就是最新版的哈
最新:小程序模块
<view class="menu2">
<view class="menu2_view" wx:for="{{arry}}" wx:key="{{arry}}" wx:for-index="idx" bindtap="btnanniu"> //每个模块都有一个对应的idx.这样就可以进行判断了
<image src="{{item.src}}" mode="widthFix" class="menu3icon" id="{{idx}}"></image>
<text>{{item.text}}</text>
</view>
</view>
js:
Page({
data:{
arry:[
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
{src:"http://XXX/hospitalImgs/menu1.png",text:"孕前检查"},
]
},

})
小程序-列表块/类式ul-li格式(1)的更多相关文章
- 微信小程序-列表渲染多层嵌套循环
微信小程序-列表渲染多层嵌套循环 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for= ...
- 微信小程序退款 处理类
<?php /** * 微信小程序退款 处理类参考https://www.cnblogs.com/afei-qwerty/p/7922982.html * */ class WeixinRefu ...
- 微信小程序初探【类微信UI聊天简单实现】
微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的位置.对比公众号,就我的感觉来说,有以下 ...
- 微信小程序列表项滑动显示删除按钮
微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来 ...
- 微信小程序列表加载更多
概述 基于小程序开发的列表加载更多例子. 详细 代码下载:http://www.demodashi.com/demo/13632.html 一.前言 基于小程序开发的列表加载更多例子. 二.运行效果 ...
- 手持式停车收费管理系统全套案例,支持车牌识别,包含了android版app,微信小程序查询,响应式管理后台,云端大数据存储
先展示几个app效果图片吧,使用起来非常方便,关联了机器的快捷键操作,操作速度提高了不少,摄像头车牌自动识别,车牌识别无网络情况下离线也可以使用 再来一张后台截图,停车场信息完整显示,今日数据实时 ...
- 微信小程序+PHP:动态显示项目倒计时(格式:4天7小时58分钟39秒)
1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p class="endtime_act">距报名截止还有: <block ...
- 【wx:for】小程序列表渲染的使用说明
wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item,即: {{index}} . {{it ...
- this that 时间戳转日期 小程序 列表 与 加载
var gd = getApp().globalData; var imgUrlApp = gd.imgUrlApp; var localImgPath = gd.localImgPath; var ...
随机推荐
- House of force
0x00 利用要点 1.申请一块非常大的块. 2.精心构造size覆盖top chunk的chunk header. 3.调用malloc()实现任意地址写 0x01 申请一块非常大的块. 申请一个负 ...
- js的正则表达式总结
1.8-20位数字 or 字母 or 特殊字符 var reg = /^[0-9a-zA-Z!@#$%^&*()_+-/.]{8,20}$/; 2.8-20位 数字+字母+特殊字符 //正则 ...
- 不安装oracle客户端用sqlplus连接数据库
在不安装oracle客户端情况下用sqlplus连接数据库: 1.去官网下载 http://www.oracle.com/technetwork/topics/winx64soft-089540.ht ...
- 如何查看 JAR 包的源代码
ava 项目的编译文件经常被打包成 JAR(Java Archive,Java 归档文件)文件,当然,作为学习,有时候也非常想看到这个 JAR 被打包前的源代码是怎么样的. 下面提供几种查看 JAR ...
- HTML防止重复提交
1 在你的表单页里HEAD区加入这段代码: <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <ME ...
- javase(1)_基础语法
一.java概述 1.Java语言特点:纯面向对象(一切皆对象),平台无关(JVM屏蔽底层运行平台的差异),不同的平台有不同的JVM,JVM将程序翻译成当前操作系统能执行的程序,一次编译到处运行),健 ...
- mybatis 批量操作增删改查
在介绍批量操作之前,首先先介绍一个语法:foreach.可以说是,foreach是整个批量操作的灵魂. 属性 描述 item 循环体中的具体对象. 支持属性的点路径访问,如item.age,item. ...
- python--前端CSS
一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义了如何显示HTML元素,给HTML设置样式,让他更加美观. 当浏览器读到这个样式表, 他就会按照这个样式来对文档进行 ...
- Python从文件中读取数据(2)
一.读取文件中各行的内容并存储到一个列表中 继续用resource.txt 举例 resource.txt my name is joker, I am 18 years old, How about ...
- CentOS6配置静态IP
CentOS6配置静态IP 1. 编辑网卡配置 vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 HWADDR=不需要改 TYPE=Et ...