【微信小程序】自定义属性和跳转传参

最新推荐文章于 2024-08-12 10:20:55 发布

cdgogo

最新推荐文章于 2024-08-12 10:20:55 发布

阅读量229

点赞数

分类专栏：微信小程序

本文链接：https://blog.youkuaiyun.com/cdgogo/article/details/119791167

版权

微信小程序专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在微信小程序中实现自定义属性设置，并详细讲解从新闻列表页面到新闻详情页面的参数传递过程，以实现数据的动态交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：
在这里插入图片描述
说明：从新闻列表跳转到新闻详情通常是需要传参的。

<view class="item" catchtap = "goDetail" wx:for="{{news}}" wx:key="index" data-id="{{item.id}}">
    <view class="left">
        <view class="tit">{{item.title}}</view>
        <view class="looks">{{item.look}}浏览</view>
    </view>
    <view class="right">
        <image class="img" src="{{item.imgUrl}}" mode="aspectFill"></image>
    </view>
</view>

.item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .left {
        width: 420rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .tit {
            color: #000;
            font-size: 30rpx;
        }

        .looks {
            color: #999;
            font-size: 24rpx;
        }
    }

    .right {
        .img {
            width: 240rpx;
            height: 180rpx;
            border-radius: 10rpx;
        }
    }
}

data:{
	news: [
      {
        id:1,
        title: "卧室的门怎么开，很多人其实都没有注意",
        look: "43324",
        imgUrl: "../../images/new1.png",
      },
      {
        id:2,
        title: "新房装修设计不可错过的设计巧思，你的家也可以颜值爆棚",
        look: "43324",
        imgUrl: "../../images/new2.png",
      },
      {
        id:3,
        title: "家有老小，装修环保材料怎么选?",
        look: "43324",
        imgUrl: "../../images/new3.png",
      },
    ],
},
goDetail:function(e){
  let id = e.currentTarget.dataset.id;
  wx.navigateTo({
    // url: "../detail/index?id="+id,
    url: `../detail/index?id=${id}`,
  });
},