微信小程序发布列表页面处理

复制代码
wxml:
<!--pages/good_index/good_index.wxml-->
<view class='list'>
  <block wx:for='{{info}}' wx:key='list' wx:for-item="item">
  <view class="list_item">
      <!-- <navigator url='details?id={{item.goods_id}}'> -->
      <view class='img'>
        <image src="/pages/img/1.jpg"  mode="scaleToFill"/>
      </view>
      <view class='info'>
        <view class='title'>商品名称:{{item.title}}</view>
        <view class='price'>商品价格:¥{{item.price}}</view>
        <view class='num'>商品销量:{{item.type }}</view>
        <view class='nums'>商品属性:{{item.type }}</view>
      </view>
  </view>
  </block>
</view>
复制代码

wx.ss

复制代码
/* pages/good_index/good_index.wxss */
.clear{
    clear: both;
    overflow: hidden;
  }
  navigator{
    display:inline;
  }
  .list{
    margin-top:10px;
  }
   
  .list .list_item{
    margin-top:10px;
    padding:10px;
    height:100px;
    border-bottom:1px solid #E8E8E8;
  }
  .list .list_item .img{
    float:left;
    width:40%;
    height:100%;
  }
  .list .list_item .img image{
     width:100%;
     height:100%;
  }
   
  .list .list_item .info{
    width:59%;
    float:right;
    height:100px;
    position:relative;
  }
  .list .list_item .info .title{
    color:#333;
    margin-left:10px;
    font-size: 15px;
  }
   
  .list .list_item .info .price{
    color:#FF2727;
    margin-left:10px;
    margin-top:10px;
    font-size:15px;
  }
   
  .list .list_item .info .num{
    position: absolute;
    left:0px;
    bottom:10px;
    color:#747474;
    margin-left:10px;
    font-size:15px;
  }
  .list .list_item .info .nums{
    position: absolute;
    left:0px;
    bottom:10px;
    color:#747474;
    margin-left:10px;
    font-size:15px;
  }
复制代码

wx.js

复制代码
// pages/good_index/good_index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {

        info:[]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        wx.request({
            url: 'http://www.yan.com/api/xcx/goodIndex', //仅为示例,并非真实的接口地址
            header: {
              'content-type': 'application/json' // 默认值
            },
            method:"POST",
            success :res=> {
              console.log(res.data.data)
            this.setData({
                info:res.data.data
            })
            }

          })



    },

})
复制代码

 

posted @   王越666  阅读(316)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示