微信小程序for循环以及页面跳转

微信小程序for循环以及页面跳转,第1张

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"

}

效果图:

有以下几种情况哈:

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

```

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

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

</view>

```

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

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

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

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

是小程序里循环渲染语法wx:for怎么获取id是吧?每一个wx:for都建议绑定一个key,这个key就是当前数据的唯一标识,可以通过key来获取id

如果是数据是数组默认index就是当前数组索引,数据是对象就是当前对象属性的key


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

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

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

发表评论

登录后才能评论

评论列表(0条)

保存