微信小程序为什么获取不到for循环的item

微信小程序为什么获取不到for循环的item,第1张

有以下几种情况哈:

1. 小程序中for循环的item,需要使用{{}}进行数据绑定,例如:

```

<view wx:for="{{list}}" wx:key="index">

<view>{{item}}</view>

</view>

```

2. 如果您无宽洞法获取到for循环的item,可能是因为您在页面渲染时,没有正确地将数据传递到wxml中梁巧轮,或者数据格式出现了问题。

3. 另外,如果您在for循环中使用了异步函数或者网络请求,可能会出现获取不到item的情况,因为此时item的值可能还未被赋值。

4. 最后,建议您检查一下代码中是橡信否存在语法错误、变量名错误等问题,这些都可能导致获取不到item。

希望以上几点能对您有所帮助,如有其他问题,欢迎再次咨询。

wxml内容:

<view bindtap="a" data-f="{{flag}}">123</view>

<!-- wx:for="{{数组}}" 循环需要绑定key wx:key="index"-->

<!-- 自带定义 item 表示数组的每一项 index 表示数组的索引 -->

<!-- 使用wx:for-item修改每一项值的key -->

<!-- 使用wx:for-index修改每一项值的index -->

<view wx:for="{{list}}" class="t" wx:key="i" 

    wx:for-item="r" wx:for-index="i"

    style="color:{{r.styFlag?'red':''}}"

    data-i="{{i}}"

    bindtap="choose"

>

    {{r.name}}--{{i}}

</view>

js内容:

data: {

        flag:1,

        list:['冰墩墩','雪融融答腊','小泡菜'],

        list:[{

            name:'冰墩墩',

            styFlag:true

        },{

            name:'雪融融',

            styFlag:false

        },{

            name:'小泡菜',

            styFlag:false

        }]

    },

    choose:function(e){

        let { currentTarget:{ dataset:{i} } } = e

        /* 第一步获取点击的当前的内容的索引 */

        console.log(i)

        /* 排他 把所有的先置空 */

    枝旦    this.data.list.forEach(r=>{

            r.styFlag = false

        })

        this.data.list[i].styFlag = true

        /* 数据变了猛举扰 视图没变 必须要使用setData实现数据和视图的双向数据绑定 */

        this.setData({

            list:this.data.list

        })

    },

    a:function(e){

        console.log(e)

    },

效果:

wxml内容:

<button bindtap="go1" style="margin: 3px">张三</button>

<button bindtap="go2" style="margin: 3px">李四</button>

<button bindtap="go3" style="margin: 3px">24号</button>

<button bindtap="go4" style="margin: 3px">不带参数</button>

<button bindtap="goBack">返回上一级</button>

<!-- wx:if 和 wx:elif 以及wx:else之间不可以被其他的标签打断 -->

<block>

    <view wx:if="{{msg=='zhangsan'}}" class="t">欢迎回来主人</view>

    <view wx:elif="{{msg=='lisi'}}" class="t">家里水龙头没有坏不要过来</view>

    <view wx:elif="{{msg=='24'}}" class="t">您好欢迎为您服务</view>

    <view wx:else class="t">显示家里没人</view>

</block>

js内容:

Page({

    /**

     * 页面的初始数据

     */

    data: {

        msg:""

    },

    goBack:function(){

        wx.navigateBack()

    },

    /**

     * 生命周期函数--监听页面加载

     */

    onLoad: function (options) {

        console.log(options.name)

        /* 多次使用setData会影响性能 尽量把多次setData 使用一次setData来实现

        尽量少的使用setData来提高小程序的性能 */

        this.setData({

            msg:options.name

        })

        /* 如果名字叫张三 页面显示欢迎回来主人 */

        /* 如果名字叫李四 页面显示家里水龙头没有坏不要过来 */

        /* 如果名字叫24号 页面显示您好欢迎为您服务 */

        /* 都不是 显示家里没人 */

    },

    /**

     * 生命周期函数--监听页面初次渲染完成

     */

    onReady: function () {

    },

    /**

     * 生命周期函数--监听页面显示

     */

    onShow: function () {

    },

    /**

     * 生命周期函数--监听页面隐藏

     */

    onHide: function () {

    },

    /**

     * 生命周期函数--监听页面卸载

     */

    onUnload: function () {

    },

    /**

     * 页面相关事件处理函数--监听用户下拉动作

     */

    onPullDownRefresh: function () {

    },

    /**

     * 页面上拉触底事件的处理函数

     */

    onReachBottom: function () {

    },

    /**

     * 用户点击右上角分享

     */

    onShareAppMessage: function () {

    }

})

{

  "pages": [

    "pages/index/index",

    "pages/forpage/forpage",

    "pages/mypage/mypage",

    "pages/logs/logs",

    "pages/fenglei/fenglei"

  ],

  "window": {

    "backgroundTextStyle": "dark",

    "navigationBarBackgroundColor": "#FF0000",

    "navigationBarTitleText": "kw47page",

    "navigationBarTextStyle": "white"

  },

  "tabBar": {

    "color": "#fff",

    "selectedColor": "#FFCA28",

    "backgroundColor": "#000",

    "list": [{

      "pagePath": "pages/index/index",

      "text": "首页",

      "iconPath": "",

      "selectedIconPath": ""

    }, {

      "pagePath": "pages/logs/logs",

      "text": "日志",

      "iconPath": "",

      "selectedIconPath": ""

    }]

  },

  "style": "v2",

  "sitemapLocation": "sitemap.json"

}

效果图:

方法/步骤

在小程序中为了实现一个中添加多个内容重复的标签,那就需要使用循环。如果按小程序的简易教程,循环加在中,而放在里面。所有数据都会遍历到每一个中。这不是我们想要的。

请点击输入图片描述

在微信小程序中有个属性,是指当点击列表元素时当按下鼠标左键会显示样式,但是鼠标离开样式就会复原.

请点击输入图片描述

核心点:模板文件中使用三元运算符,通过dateCurrent指定当前item的id。

请点击输入图片描述

在组件上使用控制属性绑定一个数组,即可使用数组中拆携明各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index,数组当前项的隐判变量名默认为item 事例。

请点击输入图片描述

接着用在标签上,以渲染一个包含多节点的结构块。

请旅告点击输入图片描述

接着只需要把放入文件中就可以,把循环数据绑定到上就可以了。

请点击输入图片描述


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/yw/12273003.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-24
下一篇 2023-05-24

发表评论

登录后才能评论

评论列表(0条)

保存