收藏
评论

小程序首页方案【仿‘极客时间’小程序】



代码如下:


<!--pages/test/jikeshijian/demo.wxml-->

<swiper bindchange="change" current="{{current-1}}" previous-margin="80rpx" next-margin="80rpx" class='lyb_larg_swiper'>

<block wx:for="{{items}}">

<swiper-item wx:if="{{index==0}}">

<!--循环出来的第一项-->

<view style='' class='lyb_swiper_container'>

<view class='lyb_swiper_imgsrc'>

<image src='{{item.imgsrc}}'></image>

</view>

<image class='lyb_swiper_headsrc' src='{{item.headsrc}}'></image>

<view class='lyb_swiper_Label'>{{item.label}}</view>

<view class='lyb_swiper_name'>{{item.name}}</view>

<view class='lyb_swiper_teacherInfo'>{{item.teacherInfo}}</view>

<view class='lyb_swiper_hr'></view>

<view class='lyb_swiper_title'>{{item.title}}</view>

<view class='lyb_swiper_introduction'>{{item.introduction}}</view>

<view class='lyb_swiper_price'>¥ {{item.price}}</view>

<view class='lyb_swiper_peopleNum'>{{item.peopleNum}}人与你共同学习</view>

</view>

</swiper-item>

<!--循环出来的最后一项-->

<swiper-item wx:elif="{{index==items.length-1}}">

<view style='' class='lyb_swiper_container'>

<view class='lyb_swiper_imgsrc'>

<image src='{{item.imgsrc}}'></image>

</view>

<image class='lyb_swiper_headsrc' src='{{item.headsrc}}'></image>

<view class='lyb_swiper_Label'>{{item.label}}</view>

<view class='lyb_swiper_name'>{{item.name}}</view>

<view class='lyb_swiper_teacherInfo'>{{item.teacherInfo}}</view>

<view class='lyb_swiper_hr'></view>

<view class='lyb_swiper_title'>{{item.title}}</view>

<view class='lyb_swiper_introduction'>{{item.introduction}}</view>

<view class='lyb_swiper_price'>¥ {{item.price}}</view>

<view class='lyb_swiper_peopleNum'>{{item.peopleNum}}人与你共同学习</view>

</view>

</swiper-item>

<swiper-item wx:else>

<!--循环出来的非第一项非最后一项-->

<view style='' class='lyb_swiper_container'>

<view class='lyb_swiper_imgsrc'>

<image src='{{item.imgsrc}}'></image>

</view>

<image class='lyb_swiper_headsrc' src='{{item.headsrc}}'></image>

<view class='lyb_swiper_Label'>{{item.label}}</view>

<view class='lyb_swiper_name'>{{item.name}}</view>

<view class='lyb_swiper_teacherInfo'>{{item.teacherInfo}}</view>

<view class='lyb_swiper_hr'></view>

<view class='lyb_swiper_title'>{{item.title}}</view>

<view class='lyb_swiper_introduction'>{{item.introduction}}</view>

<view class='lyb_swiper_price'>¥ {{item.price}}</view>

<view class='lyb_swiper_peopleNum'>{{item.peopleNum}}人与你共同学习</view>

</view>

</swiper-item>

</block>

</swiper>


<view style='text-align:center;color:gray;'>{{thiscurrent}}</view>




/* pages/test/jikeshijian/demo.wxss */

.lyb_larg_swiper{

margin-top: 80rpx;

height: 950rpx;

}


.lyb_larg_swiper swiper-item{

height: 950rpx;

padding: 20rpx;

box-sizing: border-box;

}


.lyb_swiper_container{

overflow: hidden;

position: relative;

background: #fff;

height: 910rpx;

border-radius: 20rpx;

display: flex;

flex-direction: column;

align-items: center;

}


.lyb_swiper_Label{

background: yellowgreen;

box-sizing: border-box;

width: 110rpx;

border-radius: 30rpx;

text-align: center;

height: 50rpx;

line-height: 50rpx;

font-size: 30rpx;

color: #fff;

position: absolute;

right: -20rpx;

top: 25rpx;

z-index: 10;

}


.lyb_swiper_imgsrc{

display: flex;

justify-content: center;

height: 400rpx;

width: 950rpx;

border-radius: 0 0 50% 50%;

}


.lyb_swiper_imgsrc image{

width: 590rpx;

height: 400rpx;

}


.lyb_swiper_headsrc{

width: 150rpx;height: 150rpx;border-radius: 50%;

position: relative;

top:-85rpx;

border:9rpx solid #fff;

}



.lyb_swiper_name{

font-size: 35rpx;

position: relative;

top: -65rpx;


}



.lyb_swiper_introduction{

position: relative;

top: 0rpx;

font-size: 25rpx;

color: gray;

}

.lyb_swiper_teacherInfo{

position: relative;

font-size: 25rpx;

color: gray;

top: -70rpx;

}



.lyb_swiper_title{

position: relative;

top: -25rpx;

}

.lyb_swiper_hr{

height: 7rpx;width: 150rpx;background: red;

border-radius: 10%;

position: relative;

top: -38rpx;

}


.lyb_swiper_price{

color: red;

position: relative;

top: 20rpx;

}


.lyb_swiper_peopleNum{

font-size: 20rpx;

position: relative;

bottom: -30rpx;

color: gray;

}


// pages/test/jikeshijian/demo.js

Page({


/**

    * 页面的初始数据

    */

data: {

thiscurrent: "error",

current:2,

items: [

{

imgsrc: "http://img3.imgtn.bdimg.com/it/u=1155834551,413207512&fm=27&gp=0.jpg", text: "1", headsrc: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=446293523,492134945&fm=111&gp=0.jpg", label: "上新", name: "樱桃味二狗子", teacherInfo:"大名二狗,资深养狗专家",title: "养狗常识", introduction: "通俗易懂的养狗常识", price: "998", peopleNum:"250"

},

{

imgsrc: "http://img4.imgtn.bdimg.com/it/u=3345436660,571086678&fm=27&gp=0.jpg", text: "1", headsrc: "http://img4.imgtn.bdimg.com/it/u=614121273,1498224121&fm=27&gp=0.jpg", label: "上新", name: "王二麻子", teacherInfo: "专治疑难杂症,随治随走", title: "药到病除", introduction: "通俗易懂的养狗常识", price: "998", peopleNum: "2250"

},

{

imgsrc: "http://img4.imgtn.bdimg.com/it/u=840386850,316226884&fm=27&gp=0.jpg", text: "3", headsrc: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=446293523,492134945&fm=111&gp=0.jpg", label: "上新", name: "陈浩", teacherInfo: "大名二狗,资深养狗专家", title: "养狗常识", introduction: "通俗易懂的养狗常识", price: "998", peopleNum: "2580"

},

{

imgsrc: "http://img5.imgtn.bdimg.com/it/u=3445325042,63578577&fm=27&gp=0.jpg", text: "4", headsrc: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=446293523,492134945&fm=111&gp=0.jpg", label: "上新", name: "陈浩", teacherInfo: "大名二狗,资深养狗专家", title: "养狗常识", introduction: "通俗易懂的养狗常识", price: "998", peopleNum: "1250"

},

{

imgsrc: "http://img4.imgtn.bdimg.com/it/u=3345436660,571086678&fm=27&gp=0.jpg", text: "1", headsrc: "http://img4.imgtn.bdimg.com/it/u=614121273,1498224121&fm=27&gp=0.jpg", label: "上新", name: "王二麻子", teacherInfo: "专治疑难杂症,随治随走", title: "药到病除", introduction: "通俗易懂的养狗常识", price: "998", peopleNum: "2250"

},


]

},


change: function (res) {

console.log(res.detail);

this.setData({

thiscurrent: res.detail.current+1+"/"+this.data.items.length

})

},

/**

    * 生命周期函数--监听页面加载

    */

onLoad: function (options) {

this.setData({

thiscurrent: this.data.current+ "/" + this.data.items.length

})

},


/**

    * 生命周期函数--监听页面初次渲染完成

    */

onReady: function () {


},


/**

    * 生命周期函数--监听页面显示

    */

onShow: function () {


},


/**

    * 生命周期函数--监听页面隐藏

    */

onHide: function () {


},


/**

    * 生命周期函数--监听页面卸载

    */

onUnload: function () {


},


/**

    * 页面相关事件处理函数--监听用户下拉动作

    */

onPullDownRefresh: function () {


},


/**

    * 页面上拉触底事件的处理函数

    */

onReachBottom: function () {


},


/**

    * 用户点击右上角分享

    */

onShareAppMessage: function () {


}

})


最后一次编辑于  2018-03-15  (未经腾讯允许,不得转载)
赞 0
收藏

3 个评论

  • 貌似祸害
    貌似祸害
    2018-10-11

    感谢分享

    2018-10-11
    赞同
    回复
  • 苏晓光
    苏晓光
    2018-03-21

    遍历时区分第一个最后一个是为何?好像代码也一样

    2018-03-21
    赞同
    回复
  • 陈
    2018-03-15

    棒棒哒,就喜欢这种分享的人

    2018-03-15
    赞同
    回复