探索、思考、创造、分享

数据驱动、坚持为客户提供有价值的服务和内容

当前位置: 南京小程序开发 > 小程序资讯 > 小程序制作 >
南京小程序开发说说微信小部件使用for循环动态渲染页面操作示例
来源:南京小程序开发   发布时间:2019-06-25 点击:
在本文中,给出了一个示例来说明Wechat applet如何使用for循环动态呈现页面。分享供您参考,如下:
 
我们先来看看操作效果:
这个列表效果可以说是最常见的,当然不是一个接一个,它使用我们要说的循环渲染。
 
实际上,它非常简单。我只是去看看代码。
 
wxml部分:
 
 
<view wx:for='{{languageList}}' class='hua' data-name='{{item.name}}' data-id='{{item.id}}' bindtap='select'>
    <text class='yuzhong'>{{item.name}}</text>
  </view>
 
Wxss部分:
 
.select {
  height: 80rpx;
  width: 90%;
  margin: 0 auto;
  border-bottom: 1px dashed #5e5e62;
  color: #fff;
  font-size: 32rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 10rpx;
  box-sizing: border-box;
}
.hua {
  height: 80rpx;
  border-bottom: 1px dashed #5e5e62;
  width: 90%;
  margin: 0 auto;
  padding-left: 10rpx;
  box-sizing: border-box;
}
.yuzhong {
  color: #fff;
  font-size: 32rpx;
  line-height: 80rpx;
}
 
JS部分:
 
data: {
    bg:"../../images/other_bg.png",
    language:'',
    isFlag:false,
    cid:'',
    // languageList:{},
    languageList:[
      {
        id:0,
        Name: "Heze"
      },
      {
        id: 1,
        Name: Northeast
      },
      {
        id: 2,
        Name: "Beijing"
      },
      {
        id: 3,
        Name: "Zhejiang"
      }
    ]
  },
希望南京小程序开发今天带来的这篇文章对小程序的开发有所帮助。
  • 上一篇:小程序的构建及其登录失败的解决方案
  • 下一篇:南京小程序开发需要多少费用
  • 最新资讯
    2019-11-22
    南京小程序开发注意事项
    现在小程序的发展越加的成熟,加入到小程序中企业商家也越
    2019-11-22
    南京APP开发耗费时间长
    移动互联网在不断发展,移动App也成为了当下最热门的应用工
    2019-10-21
    餐饮微信小程序怎么做
    伴随着科学与技术的日新月异,我们的生活也正在发生着翻天
    2019-10-09
    南京APP定制开发
    一个移动APP项目研发规模可大可小,但都离不开以下几个成员
    2019-10-09
    南京定制小程序需要多少钱
    常常会有顾客向人们资询开发设计1个南京小程序必须要多少
    随机资讯
    2019-09-13
    南京小程序开发哪家好
    南京小程序开发 哪家好?南京小程序开发哪个好?下面跟随
    2018-09-20
    OS X MAVERICKS:设计师的有用新功能
    苹果公司发布了他们最新的OS X迭代版本,称为Mavericks(最终
    2018-09-20
    南京网站制作说说为什么在元标题和H1标签上使用
    互联网上的一些“SEO指令”将元标题(标题标签)和H1(标题
    2018-10-10
    百度说熊掌账号标志着白帽SEO的春天,但......
    虽然百度继续声称其在中国的移动搜索结果越来越多来自熊掌
    2019-06-28
    南京小程序开发需要多少费用
    小程序可通过微信(扫描二维码、搜索、分享等多方接口)即可