微信小程序文章详情页跳转案例详解

- 日理万妓 2022-09-04 05:51 169阅读 0赞

![45c1154125f5981209e81bfc568d74a8.gif][]

**index.html**

<view class="container">
     <view wx:for="{
       {cardTeams}}" wx:key="{
       {index}}" wx:for-item="cardTeam" class="item">
     <image class="img" src="{
       {cardTeam.imgsrc}}" mode="scaleToFill"></image>
     <view class="number-wrapper">
      <text class="name">{
       {cardTeam.name}}</text>
      <view class="count-wrapper">
      <text class="count">{
       {cardTeam.count}}</text>
      </view>
      <view class="details">
      <navigator url="../details/details?goodsId={
       {index}}">查看详情</navigator>
      </view>
     </view>
     </view>
    </view>

**index.wxss**

.container {
     padding-top: 0;
    }
    
    .item {
     width: 100%;
     height: 220rpx;
     position: relative;
     display: flex;
     margin: 10rpx 10rpx;
     border-bottom: 1px solid rgb(197, 199, 199);
    }
    
    .item:first-child {
     margin-top: 0;
    }
    
    .item .remove {
     width: 60px;
     height: 100%;
     background-color: red;
     position: absolute;
     top: 0;
     right: -60px;
     display: flex;
     justify-content: center;
     align-items: center;
    }
    
    .item .number-wrapper {
     
     padding-top: 25rpx;
     flex-direction: column;
     justify-content: space-between;
    }
    
    .item .ok {
     width: 60px;
     height: 100%;
     padding-right: 20rpx;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #98f5ff;
    }
    
    .item .img {
     width: 150rpx;
     height: 150rpx;
     padding: 20rpx;
    }
    
    .number-wrapper .name {
     margin: 10rpx 10rpx 10rpx 10rpx;
     font-size: 39rpx;
     overflow: hidden;
    }
    
    .number-wrapper .count-wrapper {
     display: flex;
     align-items: center;
     margin-left: 10rpx;
     font-size: 25rpx;
    }
    
    .number-wrapper .count-wrapper .decrease-btn {
     font-size: 30rpx;
    }
    
    .number-wrapper .count-wrapper .increase-btn {
     font-size: 30rpx;
    }
    
    .number-wrapper .count-wrapper .count {
     margin: 0 1rpx 0 1rpx;
     font-size: 30rpx;
    }
    
    .number-wrapper .price-wrapper .people {
     margin-left: 250rpx;
     font-size: 30rpx;
    }
    
    /* 搜索框样式 */
    
    .view-search {
     display: flex;
     flex-direction: row;
     height: 70rpx;
     margin: 20rpx;
     padding: 5rpx;
     border: 1px #e4e2e2 solid;
     border-width: thin;
     align-items: center;
    }
    
    .input {
     flex: 1;
     height: 60rpx;
    }
    
    .input-placeholder {
     color: #999;
    }
    
    .button {
     width: 60rpx;
     height: 60rpx;
    }
    .details{
    font-size: 36rpx;
    color:red;
    }

**index.js**

//index.js
    //获取应用实例
    var app = getApp();
    var cardTeams;
    Page({
     data: {
     cardTeams: [{
      "viewid": "1",
      "imgsrc": "https://13373313365.com/image/1.png",
      "price": "¥1245",
      "count": "为什么说 C 语言比 Java 难？ ",
      "name": "为什么说 C 语言比 Java 难？ ",
     }, {
      "viewid": "2",
      "imgsrc": "https://13373313365.com/image/1.png",
      "price": "¥2345",
      "count": "小程序云开发入门实战总结 ",
      "name": "小程序云开发入门实战总结 ",
     }, {
      "viewid": "3",
      "imgsrc": "https://13373313365.com/image/3.png",
      "price": "¥2345",
    
      "count": "node.js写一个小爬虫 ",
      "name": "node.js写一个小爬虫 ",
     }, {
      "viewid": "4",
      "imgsrc": "https://13373313365.com/image/3.png",
      "price": "¥2345",
      "count": "推荐一个前端开源项目 ",
      "name": "推荐一个前端开源项目 ",
     }
     ]
     },
     onLoad: function () {
     // console.log('onLoad:' + app.globalData.domain)
     }
    })

[45c1154125f5981209e81bfc568d74a8.gif]: /images/20220829/c4dc57134370482d990114d8b81902c0.png