微信小程序使用for循环动态渲染页面操作示例

本文实例讲述了微信小程序使用for循环动态渲染页面操作。分享给大家供大家参考，具体如下：

先来看看运行效果：

这种列表效果可以说是最常见的一种，肯定不是我们一个一个写上去，这就用到了我们这次要说的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:"菏泽"
      },
      {
        id: 1,
        name: "东北"
      },
      {
        id: 2,
        name: "北京"
      },
      {
        id: 3,
        name: "浙江"
      }
    ]
  },

希望本文所述对大家微信小程序开发有所帮助。

赞 (0)

相关推荐

  • 微信小程序 生命周期函数详解

    微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data 数据中声明一个变量 isClose 默认为 true 用于判断 是否为从入口打开,当点击跳转页面或者关闭小程序的时候,会触发 OnHide 函数在此函数中将判断 isClose is true 的时候即为关闭之后在打开,当跳转页面时首先将 isClose 设置为 false, 这样 触发 OnHi

  • 微信小程序遇到修改数据后页面不渲染的问题解决

    微信小程序遇到修改数据后页面不渲染的问题解决 前言: 去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的亲眼目睹了一个新技术的发展,还是感觉比较荣幸的. 唱衰小程序?我的观点是肯定不可能,因为现在每天提交审核的小程序还在继续增加,而且有些小程序确实很好用,比如摩拜的扫码骑车,还有我上周去KTV,直接用小程序扫屏幕上的二维码,就可以绑定房间,然后通过小程序点歌,切歌,发表情包等方便好玩的事情,所以,

  • 详解微信小程序Page中data数据操作和函数调用

    微信小程序Page中data数据获取和设置 一.Page中data数据的获取和设置:        1.设置data数据 this.setData(object) setData() 参数格式:接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value.其中 key 可以非常灵活,以数据 路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义. this.setData({ ; en

  • 微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)

    下面一小段代码给大家介绍微信小程序 功能函数 密码验证*,具体代码如下所示: //登录输入密码 userPasswordInput: function (e) { var that = this; this.setData({ userPassword: e.detail.value }) // console.log(e.detail.value.length) // console.log(e.detail.value); var value = e.detail.value var str

  • 微信小程序 教程之列表渲染

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件. 默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item <view wx:for="{{items}}"> {{index}}:

  • 微信小程序 条件渲染详解

    1,wx.if 在微信小程序中,小程序是使用wx.if="{{条件}}"来判断是否渲染该代码块,用法如下: <view wx.if="{{条件}}">True</view> 也可以用wx.elif和wx.else来添加一个else块,事例如下: <view wx:if="{{a>1}}"> 1 </view> <view wx:elif="{{a>2}}">

  • 微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染实例详解

    微信小程序 数据交互与渲染 实现效果图: 微信小程序的api中提供了网络交互的api,我们只要调用即可和后端进行数据交互,该api为wx.request.,具体代码如下. //list.js //获取应用实例 var app = getApp() Page({ data: { list:[], hiddenLoading: true, url: '' }, loadList: function () { var that = this; that.setData({ hiddenLoading:

  • 微信小程序学习笔记之函数定义、页面渲染图文详解

    微信小程序学习笔记之函数定义、页面渲染图文详解

    前面一篇介绍了微信小程序目录结构.基本配置.这里再来介绍一下函数定义.页面渲染. 小程序逻辑app.js:定义App函数用来注册一个小程序,包含全局数据和函数,指定小程序的生命周期回调等.整个小程序只有一个 App 实例,全部页面共享使用. //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStor

  • 微信小程序 Page（）函数详解

    微信小程序 Page（）函数详解

    微信小程序--Page():          在开发微信小程序的时候遇到函数,或者不明白的地方,最好上官网查询,相应的知识,这里小编帮大家整理了下page()函数的用法. Page() 函数用来注册一个页面.接受一个 object 参数,其指定页面的初始数据.生命周期函数.事件处理函数等. object 参数说明: 属性  类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面

  • 微信小程序 定义全局数据、函数复用、模版等详细介绍

    微信小程序 定义全局数据.函数复用.模版等问题总结: 1.如何定义全局数据 在app.js的App({})中定义的数据或函数都是全局的,在页面中可以通过var app = getApp();  app.function/key的方式调用,不过我们没有必要再app.js中定义全局函数. 2.如何实现代码的复用 函数的复用: test.js test: function(){ } module.exports={ test:test } other.js var common = require('

随机推荐