温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

怎么在微信小程序中使用for循环动态渲染页面

发布时间:2021-03-25 17:08:06 来源:亿速云 阅读:201 作者:Leah 栏目:web开发

怎么在微信小程序中使用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: "浙江"
      }
    ]
  },

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI