摘要

目前列表能布局出来,但是目前我个人还没解决的问题是:如果每个列表块都有详情页怎么解决呢?

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:"孕前检查"},

        ]

    },

btnanniu:function(e){
       console.log(e)     //此时获取到了id,之后就用id判断进入那个页面(以下图片我点击的是第二个按钮哈)
       console.log("例如:")
       if(e.target.id=="0"){
              wx.navigateTo({
                   url: '/pages/info/info',
              })
       } else if (e.target.id == "1"){
              wx.navigateTo({
                    url: '/pages/info1/info1',
             })
      }else if (e.target.id == "2") {
          // ...
     }
 
// 上面可以用if判断进入不同的页面,但是是针对按钮少的情况(若是按钮多且进入的都是不同页面,那就只有写死你);
    若是都是进入的一个页面,那我们就需要在进入同一个的页面时需要传参,带着参数进入一样的页面就请求获取对应的数据(这个问题就是其他的问题了哈)
},

})

小程序-列表块/类式ul-li格式(1)的更多相关文章

  1. 微信小程序-列表渲染多层嵌套循环

    微信小程序-列表渲染多层嵌套循环 入门教程之列表渲染多层嵌套循环,目前官方的文档里,主要是一维数组列表渲染的案例,还是比较简单单一,给刚入门的童鞋还是无从入手的感觉. <view wx:for= ...

  2. 微信小程序退款 处理类

    <?php /** * 微信小程序退款 处理类参考https://www.cnblogs.com/afei-qwerty/p/7922982.html * */ class WeixinRefu ...

  3. 微信小程序初探【类微信UI聊天简单实现】

    微信小程序最近很火,火到什么程度,只要你一打开微信,就是它的身影,几乎你用的各个APP都可以在微信中找到它的复制版,另外官方自带的跳一跳更是将它推到了空前至高的位置.对比公众号,就我的感觉来说,有以下 ...

  4. 微信小程序列表项滑动显示删除按钮

    微信小程序并没有提供列表控件,所以也没有iOS上惯用的列表项左滑删除的功能,SO只能自己干了. 原理很简单,用2个层,上面的层显示正常的内容,下面的层显示一个删除按钮,就是记录手指滑动的距离,动态的来 ...

  5. 微信小程序列表加载更多

    概述 基于小程序开发的列表加载更多例子. 详细 代码下载:http://www.demodashi.com/demo/13632.html 一.前言 基于小程序开发的列表加载更多例子. 二.运行效果 ...

  6. 手持式停车收费管理系统全套案例,支持车牌识别,包含了android版app,微信小程序查询,响应式管理后台,云端大数据存储

    先展示几个app效果图片吧,使用起来非常方便,关联了机器的快捷键操作,操作速度提高了不少,摄像头车牌自动识别,车牌识别无网络情况下离线也可以使用   再来一张后台截图,停车场信息完整显示,今日数据实时 ...

  7. 微信小程序+PHP:动态显示项目倒计时(格式:4天7小时58分钟39秒)

    1.一般我们说的显示秒杀都是指的单条数据,循环我没做. 效果: 2.wxml代码: <p class="endtime_act">距报名截止还有: <block ...

  8. 【wx:for】小程序列表渲染的使用说明

    wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item,即: {{index}} . {{it ...

  9. this that 时间戳转日期 小程序 列表 与 加载

    var gd = getApp().globalData; var imgUrlApp = gd.imgUrlApp; var localImgPath = gd.localImgPath; var ...

随机推荐

  1. House of force

    0x00 利用要点 1.申请一块非常大的块. 2.精心构造size覆盖top chunk的chunk header. 3.调用malloc()实现任意地址写 0x01 申请一块非常大的块. 申请一个负 ...

  2. js的正则表达式总结

    1.8-20位数字 or  字母 or 特殊字符 var reg = /^[0-9a-zA-Z!@#$%^&*()_+-/.]{8,20}$/; 2.8-20位 数字+字母+特殊字符 //正则 ...

  3. 不安装oracle客户端用sqlplus连接数据库

    在不安装oracle客户端情况下用sqlplus连接数据库: 1.去官网下载 http://www.oracle.com/technetwork/topics/winx64soft-089540.ht ...

  4. 如何查看 JAR 包的源代码

    ava 项目的编译文件经常被打包成 JAR(Java Archive,Java 归档文件)文件,当然,作为学习,有时候也非常想看到这个 JAR 被打包前的源代码是怎么样的. 下面提供几种查看 JAR ...

  5. HTML防止重复提交

    1 在你的表单页里HEAD区加入这段代码: <META HTTP-EQUIV="pragma" CONTENT="no-cache"> <ME ...

  6. javase(1)_基础语法

    一.java概述 1.Java语言特点:纯面向对象(一切皆对象),平台无关(JVM屏蔽底层运行平台的差异),不同的平台有不同的JVM,JVM将程序翻译成当前操作系统能执行的程序,一次编译到处运行),健 ...

  7. mybatis 批量操作增删改查

    在介绍批量操作之前,首先先介绍一个语法:foreach.可以说是,foreach是整个批量操作的灵魂. 属性 描述 item 循环体中的具体对象. 支持属性的点路径访问,如item.age,item. ...

  8. python--前端CSS

    一.CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义了如何显示HTML元素,给HTML设置样式,让他更加美观. 当浏览器读到这个样式表, 他就会按照这个样式来对文档进行 ...

  9. Python从文件中读取数据(2)

    一.读取文件中各行的内容并存储到一个列表中 继续用resource.txt 举例 resource.txt my name is joker, I am 18 years old, How about ...

  10. CentOS6配置静态IP

    CentOS6配置静态IP 1. 编辑网卡配置 vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 HWADDR=不需要改 TYPE=Et ...