有問題可以掃碼加我微信，有償解決問題。承接小程式開發。

微信小程式開發交流qq群   173683895  、 526474645 ；

正文：

先上效果圖, GIF:

<!--pages/roll/roll.wxml-->
<!-- 單身 -->
<block wx:if="{{danshen}}">
  <view class="card_wrap">
    <view animation="{{animationData}}" class="card_item">
      <span class="change_icon" bindtap="slidethis" data-src='{{img_list[0]}}'>
        <image src="../../image/changeicon.png"></image>
      </span>
      <view class="card_info">
        <navigator url='../user/my_info/my_info'>
          <view class='info'>
            <view class='name'>{{danshen_data.name}}</view>
            <view class='site font_30'>{{danshen_data.address}} ` {{danshen_data.age}}歲 ` {{danshen_data.constellation}} ` {{danshen_data.work_industry}}</view>
          </view>
          <image class='aaa' src='{{img+danshen_data.headimg}}'></image>
        </navigator>
        <view class='site'>TA的媒婆</view>
        <navigator url="../detail/detail?productId={{danshen_data.meipo_info.id}}" wx:if="{{danshen_data.meipo_info.id}}">
          <view class='page_row recommend_list'>
            <image class='' src='{{img+danshen_data.meipo_info.headimg}}'></image>
            <view class='page_clu user_title'>
              <view>{{danshen_data.meipo_info.name}}
              </view>
              <text style='color:#999'>{{danshen_data.meipo_info.qinaming}}</text>
            </view>
          </view>
        </navigator>
        <view wx:if="{{!danshen_data.meipo_info.id}}">它暫時沒有媒婆</view>
      </view>
      <image class='bg_image1' bindtouchend="slidethis" data-src='{{img_list[0]}}' src="{{img_list[0]}}"></image>
    </view>
  </view>
  <image class='bg_image2' src="{{img_list[1]}}"></image>
  <image class='bg_image3' src="{{img_list[2]}}"></image>
</block>
<!-- 媒婆 -->
<block wx:if="{{meipo}}">
  <view class='meipo'>
    <view class='top'>
      <image class='add' src='../../image/分享.png'></image>
      <view class='top_txt'>招募我的單身團</view>
    </view>
    <navigator url="../user/relation_list/relation_list">
      <view class="qbdd mt10">
        <span class="font_14 c3">單身團申請</span>
        <image src='../../image/arrowright.png' class='store_icon' style="width:40rpx; height: 40rpx;"></image>
      </view>
    </navigator>
    <navigator url="detail/detail">
      <view class="qbdd mt10">
        <span class="font_14 c3">單身團動態</span>
        <image src='../../image/arrowright.png' class='store_icon' style="width:40rpx; height: 40rpx;"></image>
      </view>
    </navigator>
    <!-- <navigator url="">
      <view class="qbdd mt10">
        <span class="font_14 c3">單身懸賞求推薦</span>
        <image src='../../image/arrowright.png' class='store_icon' style="width:40rpx; height: 40rpx;"></image>
      </view>
    </navigator> -->
    <view class='xxx'></view>

    <!-- 推薦 -->
    <view class="qbdd mt10 ">
      <span class="font_14 c3">我現有的單身團成員</span>
      <text class='store_icon shen {{shenfen==2?"on":""}}' data-id='2' bindtap='shenfen_click'>女神 {{meipo_data.k2}}</text>
      <text class='store_icon shen {{shenfen==1?"on":""}}' data-id='1' bindtap='shenfen_click'>男神 {{meipo_data.k1}}</text>
    </view>
    <view class='txt'>
      <block wx:if="{{shenfen==1}}">
        <view wx:if="{{nanshen_card}}">
          <import src="../index/card/card.wxml" />
          <template is="nanshen_card" data="{{nanshen_card,img}}" />
        </view>
        <view wx:else>
          <image class='hade' src='../../image/add.png'></image>
          <view style='color:#d0d0d0' class='top_40'>暫無男生單身團成員</view>
          <view class='add_roll'>招募我的單身團</view>
        </view>
      </block>
      <block wx:else>
        <view wx:if="{{nvshen_card}}">
          <import src="../index/card/card.wxml" />
          <template is="nvshen_card" data="{{nvshen_card,img}}" />
        </view>
        <view wx:else>
          <image class='hade' src='../../image/add.png'></image>
          <view style='color:#d0d0d0' class='top_40'>暫無女生單身團成員</view>
          <view class='add_roll'>招募我的單身團</view>
        </view>
      </block>
    </view>
  </view>
</block>
 

/* pages/roll/roll.wxss */
@import '../index/card/card';
/* 單身 */
page{
  background:#E0E0E0;
  margin: 0 auto
}
.aaa{  
  text-align: center;
  width: 85%;
  margin: 40rpx;
  height: 250rpx;
  display: inline-block;
  }
.card_wrap .card_item {
  position: absolute;
  width: 80%;
}
.card_wrap .card_item span.change_icon image {
  position: absolute;
  width: 70rpx;
  height: 21rpx;
  top: 128rpx;
  left: 305rpx;
  box-shadow:none;
}
.card_wrap .card_item .card_info {
  position: absolute;
  margin-top: 220rpx;
  left: 128rpx;
}

.card_wrap .card_item.card1 {
  transform: translateY(90rpx) translateX(50rpx);
  z-index: 3
}
.card_wrap .card_item.card2 {
  z-index: 2;
  transform: translateY(60rpx) translateX(82rpx);
}

.card_wrap .card_item.card3 {
  transform: translateY(30rpx) translateX(100rpx);
  z-index: 1;
} 
 .bg_image2 {
  left: 80rpx;
  top: 80rpx;
  position: absolute;
  z-index: -2;
  display: block;
  width: 600rpx;
  height: 950rpx;
  border-radius: 6rpx;
  box-shadow: 6rpx 23rpx 20rpx 10rpx #ccc;
}
 .bg_image1 {
  display: block;
  width: 600rpx;
  height: 950rpx;
  margin-left: 50rpx;
  margin-top: 110rpx;
  border-radius: 6rpx;
  box-shadow: 6rpx 23rpx 20rpx 10rpx #ccc;
} 

.bg_image3 {
  left: 110rpx;
  position: absolute;
  top: 50rpx;
  z-index: -3;
  display: block;
  width: 600rpx;
  height: 950rpx;
  border-radius: 6rpx;
  box-shadow: 6rpx 23rpx 20rpx 10rpx #ccc;
}
.info{
  border: 1px #E3E3E3 solid;
  padding: 20rpx;
  width: 400rpx;
  margin: 15rpx auto;
  color: white;
  background-color:rgba(0,0,0,0.2);
}
.name{
  font-size: 50rpx;
}
.recommend_list image{
  width:100rpx;height:100rpx;
  margin-top: 35rpx;
  border-radius: 50%;
}
.user_title{
  margin-top: 45rpx;
  margin-left: 40rpx;
  font-size: 30rpx;
}

/* 媒婆 */
.meipo{
  margin: 0 auto;
}
.txt{
  text-align: center}
.top{
  height: 200rpx;
  width: 100%;
  background: #01A89E;
  color: white
}
.top_txt{
  position: absolute;
  top: 50rpx;
  left: 60rpx;
  font-size: 50rpx;
  width: 250rpx;
  letter-spacing: 5rpx;
}
.add{
  width: 80rpx;
  height: 80rpx;
  float: right;
  right: 120rpx;
  position: absolute;
  top: 80rpx;
}
/* LIST */
.qbdd {
background: #fff;
width: 92%;
font-size: 12px;
color: #666;
padding: 4%;
border-bottom: 1px solid #eee;
}
.c33 {
float: left;
color: #000;
}

.store_icon {
float: right;
}
.shen{
  width: 120rpx;
  padding: 16rpx;
  text-align: center;
}
.hade{
  margin-top: 50rpx;
  position: relative;
  left: 170rpx;
  width: 170rpx;
  height: 150rpx;
}
.add_roll{
  position: relative;
  top: 60rpx;
  bottom: 60rpx;
  padding: 20rpx;
  border-radius: 50rpx;
  background: #01A89E;
  width: 50%;
  margin: 0 auto;
  color: white
}
 

// pages/roll/roll.js
var app = getApp();
var util = require("../../utils/util.js")
Page({
  data: {
    shenfen: 1,
    nanshen_card: {},
    nvshen_card: {},
    img_list: ['http://dev.wemart.cn/console/images/card/card1.png', 'http://dev.wemart.cn/console/images/card/card2.png','http://dev.wemart.cn/console/images/card/card3.png'],
    danshen_data: {},
    meipo_data: {},
    meipo: true,
    danshen: false,
    img: 'http://sz800800.cn/Uploads/',
    animationData: {},
  },
  // 男神女神推薦
  shenfen_click: function (e) {
    var shen_click_val = e.currentTarget.dataset.id
    console.log(shen_click_val)
    this.setData({
      shenfen: shen_click_val
    })
  },
  onShow: function (options) {
    if (wx.getStorageSync('btn') == 1) {
      wx.setNavigationBarTitle({ title: '快速組團' })
      this.setData({
        meipo: true,
        danshen: false
      })
    } else {
      wx.setNavigationBarTitle({ title: '智慧推薦' })
      this.setData({
        meipo: false,
        danshen: true
      })
    }
    this.show_data()
  },
  show_data: function () {
    var that = this
    var data = {
      program_id: app.program_id,
      openid: app.openid,
    }
    if (this.data.danshen) {
      util.request('', 'get', data, '正在載入資料', function (res) {
        that.setData({
          danshen_data: res.data,
          img_length: res.data.length
        })
      })
    } else {
      util.request('', 'get', data, '正在載入資料', function (res) {
        console.log(res.data)
        that.setData({
          meipo_data: res.data,
          nanshen_card: res.data.k3,
          nvshen_card: res.data.k4
        })
      })
    }

  },  
  //單身事件處理函式
  slidethis: function (e) {
    var that = this;
    var img_list = this.data.img_list;
    var img_1 = this.data.img_list[0];
    img_list.splice(0, 1)
    img_list.push(img_1)
    this.setData({
      img_list: img_list
    })
    var animation = wx.createAnimation({
      duration: 300,
      timingFunction: 'cubic-bezier(.8,.2,.1,0.8)',
    });
    this.animation = animation;
    this.animation.translateY(-420).rotate(-5).translateX(0).step();
    this.animation.translateY(0).translateX(0).rotate(0).step();
    this.setData({
      animationData: this.animation.export()
    });
    setTimeout(function () {
      that.setData({
        animationData: {}
      });
    }, 350);
    this.show_data()
  },
  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})