当前位置: 首页 > 编程笔记 >

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

葛念
2023-03-14
本文向大家介绍微信小程序使用for循环动态渲染页面操作示例,包括了微信小程序使用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: "浙江"
      }
    ]
  },

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

 类似资料:
  • 本文向大家介绍微信小程序中页面FOR循环和嵌套循环,包括了微信小程序中页面FOR循环和嵌套循环的使用技巧和注意事项,需要的朋友参考一下 微信小程序中页面FOR循环和嵌套循环 单个循环 嵌套循环 如果缺少 wx:key 页面在调试下可以看到黄色警告信息 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 本文向大家介绍微信小程序 for 循环详解,包括了微信小程序 for 循环详解的使用技巧和注意事项,需要的朋友参考一下 1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: 可以使用wx:for-item指定数组当前元素的变量名 可以使用wx

  • 本文向大家介绍微信小程序模版渲染详解,包括了微信小程序模版渲染详解的使用技巧和注意事项,需要的朋友参考一下 微信小程序的界面程序支持html语法,多加了一部分标签,如view、block、templete等。 模版渲染 index.wxml 其中{{}}里面包含的内容你可以理解为一个变量,怎么让程序解析出{{helloWord}}变量 在index.js 中注册这个变量 然后我们运行小程序,就可以

  • 本文向大家介绍微信小程序 条件渲染详解,包括了微信小程序 条件渲染详解的使用技巧和注意事项,需要的朋友参考一下 1,wx.if 在微信小程序中,小程序是使用wx.if="{{条件}}"来判断是否渲染该代码块,用法如下: <view wx.if="{{条件}}">True</view> 也可以用wx.elif和wx.else来添加一个else块,事例如下: <view wx:if="{{a>1}}"

  • 本文向大家介绍微信小程序 教程之列表渲染,包括了微信小程序 教程之列表渲染的使用技巧和注意事项,需要的朋友参考一下 系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:for 在组件上使用wx:for控制属性绑定一个数组,

  • 本文向大家介绍微信小程序 教程之条件渲染,包括了微信小程序 教程之条件渲染的使用技巧和注意事项,需要的朋友参考一下 系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML wx:if 在MINA中,我们用wx:if="{{condi