实战推荐ml代码

<block wx:if="{{type==='recommend'}}">

      <swiper previous-margin="18rpx"

              next-margin="18rpx"

              circular="{{true}}"

              autoplay="{{500}}"

      >

      <!-- 循环让src直接等于js里面的数组数据 -->

        <swiper-item wx:for="{{swiperList}}" wx:key="index">

          <image src="{{item.imgUrl}}" />

        </swiper-item>

      </swiper>

      <view class="project" >

        <!-- navigator组件打开url不带下边图标 或者用js，添加bindtap=""函数-->

        <!-- 函数里面调用wx.navigateTo({url})方法跳转到相应的页面 -->

        <navigator url="/pages/hot/hot">

            <text class="project-title" >实战推荐</text>

        </navigator>

        <!-- 左边图片 -->

        <view class="project-item" 

        wx:for="{{course}}" wx:key="index"

        data-id="{{item.id}}"

        bindtap="handleCourseTap"

        >

        <!-- 给单个项目图片添加id点击事件 -->

            <image class="pic-1" src="{{item.imgUrl}}"></image>

            <!-- 右边文字项目 -->

            <view class="project-tag" >

              <text class="project-1">{{item.title}}</text>

              <view class="project-2-2">

                <text wx:if="{{!item.promotion}}"

                class="project-2">{{item.price}}</text>

                <text wx:if="{{item.promotion}}"

                class="project-2-1">{{item.price}}</text>

                <text wx:if="{{item.notice}}"

                class="project-3">{{item.notice}}</text>

                <text class="project-4">{{item.level}}</text>

                <view class="project-5">

                  <image class="project-6" src="../../resource/my-active.png"></image>

                  <text>{{item.renqi}}</text>

                </view>

              </view>

            </view>

        </view>

      </view>

  </block>

实战推荐css代码

.header-input{

  /* 小程序实际宽度750rpx

  设计稿实际是375px单位 */

  margin: 22rpx 36rpx 14rpx 36rpx;

  line-height: 72rpx;

  border-radius: 36rpx;

  border: 1px solid red;

  padding:0 36rpx ;

  font-size: 26rpx;

  text-align: center;

}

.header-input-placeholder{

  color: blue;

}

.header{

  position: relative;

}

.header-input-icon{

  position: absolute;

  left: 50%;

  margin-left: -190rpx;

  bottom: 0;

}

.navigator{

  display: flex;

  line-height: 112rpx;

  margin-bottom: 6rpx;

}

.navigator-item{

  position: relative;

  flex: 1;

  text-align: center;

  vertical-align:middle;

  color: #2b333b;

}

.navigator image{

  position: relative;

  top: 6rpx;

  width: 36rpx;

  height: 36rpx;

}

.navigator-act{

  position: absolute;

  width: 32rpx;

  height: 8rpx;

  background-color: #F01414;

  left: 50%;

  bottom: 6px;

  border-radius: 6rpx;

}

swiper{

  height: 234rpx;

}

swiper swiper-item image{

  width: 714rpx;

  border-radius:12rpx ;

  height: 232rpx;

}

swiper-item{

  box-sizing: border-box;

  padding: 0 6rpx;

}

.project{

  margin-top: 32rpx;

  margin-left: 40rpx;

}

.project-title{

  line-height: 32rpx;

  font-weight: bolder;

  font-size: 28rpx;

  color: #2b333b;

}

.project-item{

  display: flex;

}

.pic-1{

  width: 208rpx;

  height:136rpx;

  display: inline-block;

  border-radius: 10rpx;

}

.project-tag{

  flex-direction: column;

  margin-left: 20rpx;

  border-bottom: 2rpx solid rgb(236, 229, 229);

}

.project-2-2{

  display: flex;

  font-size: 24rpx;

  margin-top: 12rpx;

}

.project-1{

  line-height: 40rpx;

  font-size: 32rpx;

  color: #2b333b;

  font-weight: bold;

}

.project-2-2 text{

  margin-right: 18rpx;

}

.project-6{

  width: 24rpx;

  height: 32rpx;

  margin-right:16rpx;

}

.project-2-1{

  color: red;

}

.active-img{

  width: 702rpx;

  height: 232rpx;

}

实战推荐js代码

Page({

  data:{

    showIcon:true,

    swiperList:[],

    course:[] ,

    searchList:null,

    type:'recommend',

    activity:[]

  },

  onLoad(){

    wx.request({

      // 图片地址存在远程接口中

      url: 'https://www.fastmock.site/mock/76124a757aa1b716f74bf50b983dabd1/weixin/api/id/d',

      success:(res)=>{

        // 对象解构赋值

        console.log(res)

        const {data:{data}}=res;

        // 或者 const data=res.data.data;

        //  将数据给swiperList和course并新建

        let {swiperList,course,activity}=data;

        this.setData({

          swiperList,

          course,

          activity

        })

      }

    })

  },

  handleInputChange(e){

    // console.log(e)

     const value=e.detail.value;

     let searchList=null;

     this.setData({showIcon:value? false: true})

    //  if(value){

    //    this.setData({showIcon:false})

    //  }else{

    //    this.setData({showIcon:true})

    //  }

  },

  changeType(e){

    console.log(e)

    // 获取type类型

    const type=e.currentTarget.dataset.type

    this.setData({

      //type:'activity'

      type

    })

  },

  handleCourseTap(e){

    console.log(e)

    const id=e.currentTarget.dataset.id

    // 跳转到另外一个页面并将id值给它

    wx.navigateTo({

      // url:`/pages/hot/hot?id=${id}`,

      url:"/pages/hot/hot",

    })

  }

})

​