Taro UI開發小程式實現左滑喜歡右滑不喜歡效果

阿新 • • 發佈：2020-05-15

摘要：

年後入職了一家新公司，與前同事交接完之後，發現公司有一個四端的專案（iOS，Android，H5，小程式），iOS和安卓都實現了左滑右滑的效果，而h5和小程式端沒實現，詢問得知前同事因網上沒找到對應的外掛，相關部落格也特別少，所以沒做就擱置下來了。

趁這段時間相對來說比較富裕，於是乎在網上也搜尋了一下，發現確實很少，但是有人提到可以用小程式可拖動元件movable-view來實現，自己嘗試來一下發現可行，於是來寫這篇部落格記錄一下，希望能幫助到後面需要用到這個功能的人！

先上效果圖：

主要技術：Taro+Taro UI+React（如果你是小程式原生或者uniapp+vue寫法都差不多，可以通用）

可拖動元件文件地址：

Taro: https://taro-docs.jd.com/taro/docs/components/viewContainer/movable-view.html

微信小程式：https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

思路：

一，我們首先把movable-area和movable-view標籤寫出來；

<movable-area>
    <movable-view>
       ......
    </movable-view>
</movable-area>

二，我們可以看到文件裡面有一個onChange方法，即拖動過程中觸發的事件；

<movable-area>
    <movable-view onChange ={this. onChange.bind(this)}>
       ......
    </movable-view>
</movable-area>

// 觸發方法，列印引數
onChange(e) {
   console.log('引數',e);
}

我們可以看到打印出了，拖動的位置和產生移動的原因等；

三，我們接著加入開始onTouchstart，移動onTouchmove，結束onTouchcancel，onTouchend三個事件方法；

<MovableView  
  key={item.id} 
  onTouchcancel={this.onCancel} 
  onTouchend={this.onCancel} 
  onTouchstart={this.onTouchStart} 
  onTouchmove={this.onTouchMove} 
  x={this.state.x}  // 橫座標位置
  y={this.state.y}  // 縱座標位置
  direction='all'  // 移動方向都可以
  outOfBounds  // 可超過可移動區域
  className='shop-imgbox' 
> 
<--中間加入圖片之類的滑動內容-->
</MovableView>

初始資料如下：

state = { 
    x: '16', 
    y: '16', 
    like: false, 
    unlike: false, 
    shopList: [ 
      { 
        img: 'https://edgefix-image.edgecom.top/ABD846F6672997A7F76CD38E8A57F954.jpg', 
      }, 
      { 
        img: 'https://edgefix-image.edgecom.top/F6E5801C304CC76DA63C02C9FB38B8F4.jpg', 
      }, 
      { 
        img: 'https://edgefix-image.edgecom.top/D518952AD1DD61B2D32556E20CC527C4.jpg', 
      }, 
      { 
        img: 'https://edgefix-image.edgecom.top/1D187E28B349679908A44BBE81F3D3CA.jpg', 
      }, 
      { 
        img: 'https://edgefix-image.edgecom.top/1129A411AC9CF5F81187CBED181B6F57.jpg', 
      } 
    ] 
  }

三個方法我們可以取到移動後改變的位置，來改變喜歡與不喜歡的狀態css，以及實現卡片滑動的效果：

1.觸控觸發的時候，我們獲取到剛剛開始觸控卡片的x，y的位置座標；

2.在觸控滑動時，我們通過滑動後的位置-滑動前的位置，來判斷距離多少來改變喜歡和不喜歡的值；

3.當手離開時，觸發取消事件，我們需要把狀態資料改為原始值，即回到最初的狀態；

// 觸控觸發 
  onTouchStart(e) { 
    console.log('222',e.touches[0].pageX); 
    this.setState({ 
      x: e.touches[0].pageX, 
      y: e.touches[0].pageY, 
    }); 
  } 
  // 觸控移動 
  onTouchMove(e) { 
    console.log('333',e.touches[0].pageX); 
    let dx = e.touches[0].pageX - this.state.x; 
    if (dx > 50) { 
      this.setState({ 
        like: true, 
        unlike: false, 
      }); 
    } else if (dx < -50) { 
      this.setState({ 
        like: false, 
        unlike: true, 
      }); 
    } else { 
      this.setState({ 
        like: false, 
        unlike: false, 
      }); 
    } 
  } 
  // 取消 
  onCancel(e) { 
    console.log('444',e.changedTouches[0].pageX); 
    this.setState({ 
      x: '16', 
      y: '16', 
      like: false, 
      unlike: false, 
    }); 
  }

當我們寫到這裡，我們去拖動我們的卡片時，你會發現確實可以拖動，並且取消的時候會回到原點，但是同樣你也會發現一個問題，就是你拖動的時候，五張卡片都被觸發來移動的效果，出現了觸點混亂的問題，查詢問題發現卡片共用了x，y，因此我們可以給每張卡片設定獨立的引數；

四，給每張卡片獨立的引數並且設定卡片傾斜度效果；

1.設定傾斜度效果

style={{transform:'rotate('+this.state.tiltAngle[index]+'deg)'}}

然後我們通過卡片移動位置計算出一個你決定合適的傾斜角度；

// 拖動後相差距離進行換算角度
let dxangle = (e.touches[0].pageX - this.state.startX) * 45 / 500;

2.設定獨立的引數

方法攜帶索引，我們取到對應的卡片index，來改變對應卡片的資料；

<MovableView 
  key={item.id}
  onTouchcancel={this.onCancel.bind(this,index)}
  onTouchend={this.onCancel.bind(this,index)}
  onTouchstart={this.onTouchStart.bind(this,index)}
  onTouchmove={this.onTouchMove.bind(this,index)}
  x={this.state.x[index]} 
  y={this.state.y[index]} 
  direction='all' 
  outOfBounds 
  className='shop-imgbox'
>
</MovableView>

同時，我們需要改變初始引數的形式為陣列，我們通過索引改變對應卡片的值；

state = {
    // 開始位置
    startX: '',
    // 開始位置-最終位置距離
    placeX: '',
    // 傾斜角度
    tiltAngle: ['0','0','0','0','0'],
    // 座標
    x: ['16','16','16','16','16'],
    y: ['16','16','16','16','16'],
    // 是否喜歡狀態
    like: [false,false,false,false,false],
    unlike: [false,false,false,false,false],
    // 推薦商品陣列
    shopList: [
      {
        id: 1,
        img: 'https://edgefix-image.edgecom.top/ABD846F6672997A7F76CD38E8A57F954.jpg',
      },
      {
        id: 2,
        img: 'https://edgefix-image.edgecom.top/F6E5801C304CC76DA63C02C9FB38B8F4.jpg',
      },
      {
        id: 3,
        img: 'https://edgefix-image.edgecom.top/D518952AD1DD61B2D32556E20CC527C4.jpg',
      },
      {
        id: 4,
        img: 'https://edgefix-image.edgecom.top/1D187E28B349679908A44BBE81F3D3CA.jpg',
      },
      {
        id: 5,
        img: 'https://edgefix-image.edgecom.top/1129A411AC9CF5F81187CBED181B6F57.jpg',
      }
    ]
  }

方法我們就舉一個例子，比如onTouchStart方法，我們遍歷卡片陣列，通過判斷索引來得到是那張卡片，從而來改變對應值

// 觸控觸發
  onTouchStart(index,e) {
    console.log('1111',index,e.touches[0].pageX,e.touches[0].pageY);
    // 重定義陣列
    var againX = [];
    var againY = [];
    // 遍歷，判斷拖動的該陣列的位置
    for (var i=0; i<this.state.shopList.length; i++){
      if (i == index) {
        againX[i] = e.touches[0].pageX;
        againY[i] = e.touches[0].pageY;
      } else {
        againX[i] = '16';
        againY[i] = '16';
      }
    }
    // 賦值
    this.setState({
      startX: e.touches[0].pageX,
      x: againX,
      y: againY,
    });
  }

這樣，我們執行程式碼，發現拖動第一張卡片不會影響到後面卡片的位置了，

同時，我們現在拖動卡片刪除的是陣列，在實際專案中，我們在觸發刪除陣列的地方接入介面，呼叫喜歡，不喜歡改變資料引數，從而也能改變陣列的長度；

五，完整程式碼；

下面我將貼出完整的程式碼供大家參考

html檔案：

import Taro, { Component } from '@tarojs/taro';
import { View, Image, Button, Text, MovableArea, MovableView } from '@tarojs/components';
import { observer, inject } from '@tarojs/mobx';
import { AtButton, AtFloatLayout  } from 'taro-ui';
import userStore from '../../store/user.store';

import './stroll.scss';

@inject('userStore')
@observer
class Stroll extends Component {
  config = {
    navigationBarTitleText: '逛',
  }

  state = {
    // 開始位置
    startX: '',
    // 開始位置-最終位置距離
    placeX: '',
    // 傾斜角度
    tiltAngle: ['0','0','0','0','0'],
    // 座標
    x: ['16','16','16','16','16'],
    y: ['16','16','16','16','16'],
    // 是否喜歡狀態
    like: [false,false,false,false,false],
    unlike: [false,false,false,false,false],
    // 推薦商品陣列
    shopList: [
      {
        id: 1,
        img: 'https://edgefix-image.edgecom.top/ABD846F6672997A7F76CD38E8A57F954.jpg',
      },
      {
        id: 2,
        img: 'https://edgefix-image.edgecom.top/F6E5801C304CC76DA63C02C9FB38B8F4.jpg',
      },
      {
        id: 3,
        img: 'https://edgefix-image.edgecom.top/D518952AD1DD61B2D32556E20CC527C4.jpg',
      },
      {
        id: 4,
        img: 'https://edgefix-image.edgecom.top/1D187E28B349679908A44BBE81F3D3CA.jpg',
      },
      {
        id: 5,
        img: 'https://edgefix-image.edgecom.top/1129A411AC9CF5F81187CBED181B6F57.jpg',
      }
    ]
  }

  componentWillMount () { }

  componentWillReact () { }

  componentDidMount () {
  }

  // 觸控觸發
  onTouchStart(index,e) {
    console.log('1111',index,e.touches[0].pageX,e.touches[0].pageY);
    // 重定義陣列
    var againX = [];
    var againY = [];
    // 遍歷，判斷拖動的該陣列的位置
    for (var i=0; i<this.state.shopList.length; i++){
      if (i == index) {
        againX[i] = e.touches[0].pageX;
        againY[i] = e.touches[0].pageY;
      } else {
        againX[i] = '16';
        againY[i] = '16';
      }
    }
    // 賦值
    this.setState({
      startX: e.touches[0].pageX,
      x: againX,
      y: againY,
    });
  }
  // 觸控離開
  onTouchMove(index,e) {
    console.log('2222',index,e.touches[0].pageX,e.touches[0].pageY);
    // 重定義陣列
    var tiltAngleT = [];
    var againX = [];
    var againY = [];
    // 拖動後相差距離
    let dxplace = e.touches[0].pageX - this.state.startX;
    // 拖動後相差距離進行換算角度
    let dxangle = (e.touches[0].pageX - this.state.startX) * 45 / 500;
    console.log(dxangle);
    // 遍歷，判斷拖動的該陣列的位置
    for (var i=0; i<this.state.shopList.length; i++){
      if (i == index && dxplace > 50) {
        tiltAngleT[i] = dxangle,
        againX[i] = true;
        againY[i] = false;
      } else if (i == index && dxplace <= -50) {
        tiltAngleT[i] = dxangle,
        againX[i] = false;
        againY[i] = true;
      } else if (i == index && dxplace < 50 && dxplace > -50) {
        tiltAngleT[i] = dxangle,
        againX[i] = false;
        againY[i] = false;
      } else {
        tiltAngleT[i] = '0',
        againX[i] = false;
        againY[i] = false;
      }
    }
    // 賦值
    this.setState({
      placeX: dxplace,
      tiltAngle: tiltAngleT,
      like: againX,
      unlike: againY,
    });
  }
  // 取消
  onCancel(index,e) {
    console.log('3333',index,e.changedTouches[0].pageX,e.changedTouches[0].pageY);
    // 賦值
    this.setState({
      tiltAngle: ['0','0','0','0','0'],
      x: ['16','16','16','16','16'],
      y: ['16','16','16','16','16'],
      like: [false,false,false,false,false],
      unlike: [false,false,false,false,false],
    });
    // 如果偏移已經達到則清除第一張圖片
    if (this.state.placeX > 50 || this.state.placeX < -50) {
      this.setState({
        shopList: this.state.shopList.splice(1,4),
      });
    }
  }
  // 不喜歡按鈕點選
  dislikebtn() {
    // 改變按鈕的狀態以及圖片位置及顯示
    this.setState({
      tiltAngle: ['-18','0','0','0','0'],
      x: ['-30','16','16','16','16'],
      y: ['267','16','16','16','16'],
      unlike: [true,false,false,false,false],
    }, () => {
      setTimeout( () => {
        this.setState({
          tiltAngle: ['0','0','0','0','0'],
          x: ['16','16','16','16','16'],
          y: ['16','16','16','16','16'],
          unlike: [false,false,false,false,false],
          shopList: this.state.shopList.splice(1,4),
        });
      },100);
    });
  }
  // 喜歡按鈕點選
  likebtn() {
    // 改變按鈕的狀態以及圖片位置及顯示
    this.setState({
      tiltAngle: ['18','0','0','0','0'],
      x: ['284','16','16','16','16'],
      y: ['267','16','16','16','16'],
      like: [true,false,false,false,false],
    }, () => {
      setTimeout( () => {
        this.setState({
          tiltAngle: ['0','0','0','0','0'],
          x: ['16','16','16','16','16'],
          y: ['16','16','16','16','16'],
          like: [false,false,false,false,false],
          shopList: this.state.shopList.splice(1,4),
        });
      },100);
    });
  }

  componentWillUnmount () { }

  componentDidShow () {
  }

  componentDidHide () { }

  render() {
    return (
      <View className='stroll-tab'>
        <View className='stroll-text'>
          <Text className='text-tip1'>搭配師每天為你推薦5件單品</Text>
          <View className='text-tip2'>
            <Text className='t1'>右滑喜歡</Text>
            <Image src={require('./img/ic_like.png')} className='icon-image'></Image>
            <Text className='t1'>，左滑不喜歡</Text>
            <Image src={require('./img/ic_dislike.png')} className='icon-image'></Image>
          </View>
        </View>
        {
          this.state.shopList.length != 0&&
          <MovableArea className='stroll-shop'>
            {
            this.state.shopList&&this.state.shopList.map((item,index) => {
              return(
                <MovableView 
                  key={item.id}
                  onTouchcancel={this.onCancel.bind(this,index)}
                  onTouchend={this.onCancel.bind(this,index)}
                  onTouchstart={this.onTouchStart.bind(this,index)}
                  onTouchmove={this.onTouchMove.bind(this,index)}
                  x={this.state.x[index]} 
                  y={this.state.y[index]} 
                  direction='all' 
                  outOfBounds 
                  className='shop-imgbox'
                >
                  <View className='images-box' style={{transform:'rotate('+this.state.tiltAngle[index]+'deg)'}}>
                    <Image src={item.img} className='images'></Image>
                    {
                      this.state.like[index]==true&&
                      <Image src={require('./img/text_like.png')} className='imagelike'></Image>
                    }
                    {
                      this.state.unlike[index]==true&&
                      <Image src={require('./img/text_dislike.png')} className='imageunlike'></Image>
                    }
                  </View>
                </MovableView>
            );})
            }
          </MovableArea>
        }
        {
          this.state.shopList.length === 0&&
          <View className='noshop-card'>
            <Image src={require('./img/noshop.png')} className='noshop-image'></Image>
          </View>
        }
        <View className='stroll-fotter'>
          {
            this.state.shopList.length != 0&&
            <View className='fot-twoimg'>
              {
                this.state.unlike[0]==false&&
                <Image src={require('./img/dislike_default.png')} className='dislike-image' onClick={this.dislikebtn.bind(this)}></Image>
              }
              {
                this.state.unlike[0]==true&&
                <Image src={require('./img/dislike_click.png')} className='dislike-image'></Image>
              }
              {
                this.state.like[0]==false&&
                <Image src={require('./img/like_default.png')} className='like-image' onClick={this.likebtn.bind(this)}></Image>
              }
              {
                this.state.like[0]==true&&
                <Image src={require('./img/like_click.png')} className='like-image'></Image>
              }
            </View>
          }
          <Text className='fot-text'>檢視我喜歡的</Text>
        </View>
      </View>
    );
  }
}

export default Stroll;

css檔案：

page {
  height: 100%;
  background: #F6F6F6;
}

.stroll-tab {
  width: 100%;
  min-height: 100vh;
  background: #F6F6F6;
  .stroll-text {
    width: 100%;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .text-tip1 {
      font-size: 28px;
      color: #333333;
    }
    .text-tip2 {
      display: flex;
      flex-direction: row;
      align-items: center;
      .t1 {
        font-size: 28px;
        color: #333333;
      }
      .icon-image {
        width:20px;
        height:20px;
      }
    }
  }
  .stroll-shop {
    width: 100%;
    height: 700px;
    margin-top: 40px;
    .shop-imgbox {
      height: 600px;
      border-radius: 24px;
      .images-box {
        width: 100%;
        height: 520px;
        border-radius: 24px;
        box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.1);
        background-color: #fff;
        position: relative;
        .images {
          width: 606px;
          height: 480px;
          position: absolute;
          left: 40px;
          top: 20px;
        }
        .imagelike {
          width: 96px;
          height: 48px;
          position: absolute;
          right: 40px;
          top: 20px;
        }
        .imageunlike {
          width: 148px;
          height: 48px;
          position: absolute;
          left: 40px;
          top: 20px;
        }
      }
    }
    .shop-imgbox:nth-child(1) {
      width: 686px;
      z-index: 50;
    }
    .shop-imgbox:nth-child(2) {
      width: 676px;
      z-index: 40;
      margin: 15px 0px 0px 5px;
    }
    .shop-imgbox:nth-child(3) {
      width: 666px;
      z-index: 30;
      margin: 30px 0px 0px 10px;
    }
    .shop-imgbox:nth-child(4) {
      width: 656px;
      z-index: 20;
      margin: 0px 0px 0px 15px;
    }
    .shop-imgbox:nth-child(5) {
      width: 646px;
      z-index: 10;
      margin: 0px 0px 0px 20px;
    }
  }
  .noshop-card {
    width: 100%;
    margin-top: 40px;
    padding: 0px 16px;
    .noshop-image {
      width: 100%;
      height: 806px;
    }
  }
  .stroll-fotter {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    .fot-twoimg {
      display: flex;
      flex-direction: row;
      align-items: center;
      .dislike-image {
        width: 120px;
        height: 120px;
      }
      .like-image {
        width: 120px;
        height: 120px;
        margin-left: 48px;
      }
    }
    .fot-text {
      color: #368BE5;
      font-size: 28px;
      margin-top: 40px;
      margin-bottom: 50px;
    }
  }
}

好了，小程式左滑右滑效果就說到這裡了，如果大家有更好的辦法請在下方留言，上述的方法可能一下拖動效果之類的還需要加以完善，有什麼好的建議和改善歡迎提出，謝謝了

Taro UI開發小程式實現左滑喜歡右滑不喜歡效果

Taro UI開發小程式實現左滑喜歡右滑不喜歡效果

小程式實現左滑刪除功能

使用Taro框架開發小程式

mpvue實現小程式購物車左滑刪除功能

小程式wepy踩坑之旅（三）----- 微信小程式wepy左滑刪除特效原始碼

Taro開發微信小程式實現簡單的登入退出功能

微信小程式實現標籤頁滑塊效果

微信小程式日曆左滑右滑特效

微信開發之小程式實現倒計時

如何用Baas快速在騰訊雲上開發小程式-系列3 ：實現騰訊雲COS API呼叫

小程式實現點選加入購物車紅點拋物線飄入

小程式 - 實現滾動文字

小程式 - 實現【一鍵複製】功能

微信小程式實現與後臺PHP互動

想高效開發小程式，mpvue瞭解下（一）

小程式實現星級打分

小程式開發-小程式的組成

小程式開發-小程式開始開發及基本設定

小程式開發-小程式介紹

小程式實現上拉載入，例項程式碼

Taro UI開發小程式實現左滑喜歡右滑不喜歡效果

相關推薦