Slide left, slide right you’re no longer alone

Whether you are a programmer or a programmer, what you do every day is coding or coding. If you have no abCD in your mind, you can solve it. Recently, there is a popular online dating software called Tantan (it is said to be YP software). As tantan used to be an experienced player who never looked at pictures but never had any experience, and a girl who loves the front end, I decided to copy this app. Since it is to send a few development, it is not send a few to decide, there is no doubt that the theme style of the whole APP has been changed to my favorite ultimate girl fan HHH, let us feel the charm of tantan-tan-bar ~

Overall effect of the project



Analysis of some function points of the project

Homepage picture left to right to click corresponding button changes

First of all, let’s talk about the most annoying place, which is the left and right sliding event of the main page and corresponding buttons will change accordingly. That is, when I swipe left, the gray button below the picture will have corresponding animation effect, and when I swipe right, the red button below the picture will have corresponding animation effect. For a small program just into the pit of sister, no god do not know to be in the logic pit here around how long to come out. I had to be instructed by a superior person to implement this function perfectly.

There are three big boxes with pictures and text information, and then put them into swiper-Item. Swiper component is used to realize the whole box swiper left and right

<swiper class='swiper-item__content' current="" bindchange="changeswiper"> <swiper-item class="swip"> <view class='page__bd_content'> <image class="slide-image" src="http://pic.qqtn.com/up/2017-12/15126388387704237.jpg" Mode ="scaleToFill"/> <view class="name">K</view> <view class="age">♂21</view> <view class="conste" Class = "status" / > culture education < / view > < / view > < / swiper - item > < / swiper >Copy the code

Instead of buttons underneath the box, I put two pictures.

<view class="page__ft"> <image class="notlike {{left? 'active':''}}" src=".. /.. /images/notlike.png" /> <image class="like {{right? 'active':''}}" src=".. /.. /images/like.png" /> </view>Copy the code

First write them an animation that will trigger when they slide

.active { animation: active 1s ease; } @keyframes active {transform: scale(0.8); } 50% {transform: scale(1.2); } 100% {transform: scale(1.0); }}Copy the code

Define three variables in the page data and bind the left and right variables to the corresponding image

data: {
    left: false ,
    right: false,
    activeIndex: 0
},
Copy the code

Determine the left and right sliding events in swiper binding events

changeswiper: function(e) { var index = e.detail.current; If (index > this.data.activeIndex) {this.setData({left: })} else if(index < this.data.activeIndex) {this.setData({right: SetTimeout (() => {this.setData({activeIndex: {activeIndex: {activeIndex: {activeIndex: {activeIndex: {activeIndex: {activeIndex: index, left:false, right:false }) }, 1000); },Copy the code

Upload images from local

Bind a data variable to SRC where you want to upload the image

<image class="addImg" src="{{imgUrl}}" bindtap="uploadImg" />
Copy the code

Put the default address of the picture, which is to add the picture before uploading the picture

data: { imgUrl: '.. /.. /images/addImg.png' },Copy the code

UploadImg: function(e) {uploadImg: function(e) {uploadImg: function(e) {

var that = this; ChooseImage ({count: 1, sizeType: ['original', 'compressed'], // select sourceType: ['album', 'camera'], // You can specify whether the source is an album or a camera, default both success: Var tempFilePaths = res.tempfilepaths; function (res) {// Return the list of local file paths for the selected photos. Thate.setdata ({imgUrl: tempFilePaths}) wx.showtoast ({// display upload success title: 'upload success', icon: 'success', duration: 2000})}}),Copy the code

The paired success list data is retrieved through easy-mock

Block Wx: For renders a structure block containing multiple nodes

<swiper-item>
    <view class="swiper-item__content">
        <block wx:for="{{friendsList}}" wx:key="index">
            <view class="weui-tab__content">
                <view class="weui-media-box__hd">
                    <image src="{{item.avatar}}" mode="aspectFit"></image>
                </view> 
                <view class="weui-media-box__bd">
                    <view class="weui-media-box__nickname">{{item.nickname}}</view>
                    <view class="weui-media-box__message">{{item.message}}</view>
                </view>
            </view>
        </block>
    </view>
</swiper-item>
Copy the code

Obtaining Background data

wx.request({
      url: 'https://www.easy-mock.com/mock/5a23dbf382614c0dc1bebf04/getFriendsList/getFriendsList',
      success: (res) => {
        // console.log(response);
        this.setData({
          friendsList: res.data.data.friendsList
        })
      }
    })
Copy the code

For personal reasons, I am not used to the official style of WeUI. Every page is made by myself, so we don’t like to spray it lightly. We are still studying hard

Some of the tools used in project development

Wechat developer tools, VScode, Github Iconfont Alibaba vector icon library: all kinds of image logo, front-end development essential esay-mock: to mock data requests, to achieve no back-end programming W3Cschool wechat small program development tutorial documentation: to develop small programs to see more

summary

Emmmm project function is still very simple at present, there are a lot of functions to slowly implement it later, such as using the uploaded picture to storage, page refresh after the picture is still in the page, slider to a certain place to save the current value of the page, simulation pairing successful pop-up reminder page and so on……

Also hope to meet the love of learning small partners to exchange learning, together in the front of the pit deeper and deeper

Project Address:
Github.com/beautifulg….Beg for encouragement ~ beg for star ~


My email: [email protected] you can find me here


The author:
segmentfault


Project Address:
Wechat small program – Swipe left and swipe right fun – Tutorial – Small program community – wechat small program – wechat small program development Community – Small program development Forum – wechat small program Alliance