Shulou(Shulou.com)05/31 Report--

This article mainly introduces mpvue Mini Program how to achieve imitation qq left slide top delete components related knowledge, the content is detailed and easy to understand, easy to operate, with a certain reference value, I believe that after reading this mpvue Mini Program how to achieve imitation qq left slide top deletion components article will have a harvest, let's take a look together.

Effect picture:

Achieve:

1, the pit of mpvue mentioned above, for example, every element in it is overflow:hidden, and it seems to inherit display:block. Look at Mini Program development tools is like this, the specific source code did not see, you can only guess. So the main solution is to let the element overflow:scroll, which is mainly used when looking at the effect.

2, left slide and right slide, this is another pit. I thought the sliding event of mpvue would be exactly the same as that of vue. Happy to roll according to the original idea, found that no matter how slippery, decisively print a wave of data, found that the sliding event is very mysterious!

3. In terms of layout, I use rpx+flex.

4. Setting and unsetting the top on click is achieved through the top of json data. Deletion is done with the splice () method of the array.

5. The sliding effect is controlled by css animation.

Post the code directly below: if you can't understand it, you can go to my github: https://github.com/JB-Chen/mpvue-slide.

Programmers, think you can give a star, in order to encourage!

HTML Code:

The main html code:

Message search

{{item.name}} {{item.sonName}} {{item.time}} {{item.infoNum}} unset the top

{{item.name}} {{item.sonName}} {{item.time}} {{item.infoNum}} Top deletion

Css Code:

/ / header * {margin:0px; padding: 0px;}. Head {width: 100%; height:130rpx; background-color: # 38A7FA; margin-top:-195rpx; display: flex; align-items: center;. Head-info {color: # fff; font-size:30rpx; margin-left: 30%; margin-top:20rpx; letter-spacing: 4rpx;} .userinfo-avatar {width: 80rpx; height: 80rpx Margin: 20rpx; border-radius: 50%; margin-top:30rpx;}} .search {width: 90%; margin-top:20rpx; margin-bottom: 20rpx; input {width: 100%; height: 20rpx; background-color: # F3F3F3; border-radius: 5rpx; z-index: 0;} span {position: absolute; color: # B5B5B5; font-size: 24rpx; margin-top:-44rpx Z-index: 999; margin-left: 42%; text-align: center;} .infoAll {width: 100%; ul {width: 100%; / / overflow-x: scroll; li {- webkit-transition: all 0.2s; transition: all 0.2s; width: 1100rpx; height: 150rpx; / / background-color: red; line-height: 150rpx Border-bottom: 1px solid # E0EEF1; / / centered vertically, / / sub-div horizontally arranged display:flex; / / justify-content:center; align-items:center; .imgInfo {width: 100rpx; height: 100rpx; border-radius: 50%; background-color: # 38A7FA; margin-left: 2% Img {width: 100rpx; height: 100rpx; border-radius: 50%; overflow: hidden;}} .centerInfo {width: 40%; height: 150rpx; margin-left: 2%; .name {margin-top:-20rpx; span {font-size: 35rpx }} .sonName {margin-top:-110rpx; span {font-size: 24rpx; color: # 7C8489;} .timeInfo {width: 15%; height: 150rpx; margin-left: 6%; .time {margin-top:-20rpx Color: # 92A0A1; font-size: 25rpx; position: absolute;} .infoNum {width:50rpx; display:flex; align-items:center; justify-content:center; height: 30rpx; border-radius: 10rpx; background-color: # 93D5ED; margin-left: 10rpx Margin-top: 70rpx;}} .top {width: 15%; height: 150rpx; background-color: # C4C7CD; color: # fff; font-size: 34rpx; text-align:center} .delect {width: 15%; height: 150rpx; background-color: # FF3B32 Color: # fff; font-size: 34rpx; text-align:center} li [data-type= "0"] {transform: translate3d (0 "1");} li [data-type= "1"] {transform: translate3d (- 400rpx re0);}

The main code of js:

Import card from'@ / components/card'export default {data () {return {userInfo: {}, commitInfo: [{img: "http://img3.imgtn.bdimg.com/it/u=3067730600,935028889&fm=27&gp=0.jpg", name:" Wangcai ", sonName:" are you going to dinner tonight? ", time:" 19:08 ", infoNum:" 9 ", top:false, type:0} {img: "http://img1.imgtn.bdimg.com/it/u=1257196754,3171363795&fm=27&gp=0.jpg", name:" Front-end Learning Group ", sonName:" hanber: asynchronous and synchronous problems ", time:" 02:08 ", infoNum:" 99 + ", top:false, type:0}, {img:" https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1672209094,624238697&fm=27&gp=0.jpg", " Name: "Primary School classmate", sonName: "long time no see How are you these days? " , time: "02:08", infoNum: "9", top:false, type:0}, {img: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1312347818,1612941824&fm=200&gp=0.jpg", name:" Mom ", sonName:" when are you going home? " , time: "23:08", infoNum: "1", top:false, type:0}, {img: "http://img2.imgtn.bdimg.com/it/u=1093392508,3329264726&fm=27&gp=0.jpg", name:" AD Animation Group ", sonName:" ghost: "your name" Resources ", time:" 02:08 ", infoNum:" 99 + ", top:false Type:0}]}}, components: {card}, methods: {/ / slide start touchStart (e) {/ / get the moving distance You can print out e, and then analyze the value of e to this.startX = e.mp.changedTouches [0] .clientX }, / / end of sliding touchEnd (let index) {/ / get the moving distance this.endX = e.mp.changedTouches [0] .clientX; if (this.startX-this.endX > 10) {for (let item0) I {this.userInfo = res.userInfo}})}}, / / Top top (index) {this.index info [index] .top =! this.index info [index] .top; this. Recover (index);}, / / Delete delect (index) {this.commitInfo.splice (index,1);}}, created () {/ / call the method of the application instance to obtain global data this.getUserInfo ()} this is the end of the article on "how mpvue Mini Program implements the left slide top deletion component imitating qq". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "mpvue Mini Program how to achieve imitation qq left slide top delete components" knowledge, if you want to learn more knowledge, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.