Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果

Taro 就是可以用 React 语法写小程序的框架,拥有多端转换能力,一套代码可编译为微信小程序、百度小程序、支付宝小程序、H5、RN等

摘要:

年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(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开发小程序实现左滑喜欢右滑不喜欢效果的文章就介绍到这了,更多相关小程序实现左滑喜欢右滑不喜欢内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Vue路由切换时的左滑和右滑效果示例

    如何实现Vue路由切换时的左滑和右滑效果,因为原作者ustbhuangyi老师的两个慕课项目中都没有这样的效果,于是突发奇想要做这个功能,看了看QQ.微信都没这样的效果,最后发现SegmentFault(思否) 和掘金两个app都有这样的效果,就以此为参考开始做了. transition 首先看看官网淡入淡出动画的例子: <div id="demo"> <button v-on:click="show = !show"> Toggle <

  • ViewPager 滑动一半的判断方法以及左滑右滑判断实例

    做项目的时候,会碰到用viewpager + fragments去实现多页滑动.有些时候需要完成:界面在滑动到一半或是一半以上的时候,需要把title之类的切换到下一个页面.这个时候仅仅依赖Viewpager的接口是不能判断,这里提供一个方法:判断viewpager是左滑还是右滑,同时对滑过一半的时候(这个参数可以调),进行相关操作. //定义两个变量,这个两个变量是表示滑动时候,positionOffset 是从大到 //小的变化,还是从小到大的变化.用于在滑动时候,避免多次调用一个方法 pr

  • 微信小程序图片横向左右滑动案例

    本文实例为大家分享了微信小程序图片左右滑动的具体代码,供大家参考,具体内容如下 图片左右滑动效果图: wxml代码: <scroll-view scroll-x="true"> <view class="uploadWrap" scroll-x="true"> <view class="upload_Item"> <image class="upload_Item_img&q

  • 微信小程序侧边栏滑动特效(左右滑动)

    侧边栏滑动是很常见的功能,但是小程序出来不久,很多特效还没有成熟案例,只能原生重写,所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一 先看效果: wxml: <!--page/one/index.wxml--> <view class="page"> <view class="page-bottom"> <view class="page-content"> <view class=&

  • 微信小程序左右滑动的实现代码

    左滑 右滑 你不再是一个人 无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决.最近网上特流行一款交友软件叫探探(据说是yp软件).作为探探曾经的一名从来只浏览图片但是没有yue过的资深玩家同时又是一位热爱前端的妹子,我决定要仿一下这个app.既然是寄几开发,那还不是寄几说了算,毫无疑问整款APP的主题风格被我改成我最爱的终极少女粉了hhh,下面让我们一起来感受下探探的魅力吧~ 项目整体效果 项目

  • 微信小程序左右滑动切换页面详解及实例代码

    微信小程序--左右滑动切换页面事件 微信小程序的左右滑动触屏事件,主要有三个事件:touchstart,touchmove,touchend. 这三个事件最重要的属性是pageX和pageY,表示X,Y坐标. touchstart在触摸开始时触发事件; touchend在触摸结束时触发事件; touchmove触摸的过程中不断激发这个事件; 这三个事件都有一个timeStamp的属性,查看timeStamp属性,可以看到顺序是touchstart => touchmove=> touchmov

  • Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果

    Taro 就是可以用 React 语法写小程序的框架,拥有多端转换能力,一套代码可编译为微信小程序.百度小程序.支付宝小程序.H5.RN等 摘要: 年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到对应的插件,相关博客也特别少,所以没做就搁置下来了. 趁这段时间相对来说比较富裕,于是乎在网上也搜索了一下,发现确实很少,但是有人提到可以用小程序可拖动组件m

  • Taro UI框架开发小程序实现左滑喜欢右滑不喜欢效果的示例代码

    Taro 就是可以用 React 语法写小程序的框架,拥有多端转换能力,一套代码可编译为微信小程序.百度小程序.支付宝小程序.H5.RN等 摘要: 年后入职了一家新公司,与前同事交接完之后,发现公司有一个四端的项目(iOS,Android,H5,小程序),iOS和安卓都实现了左滑右滑的效果,而h5和小程序端没实现,询问得知前同事因网上没找到对应的插件,相关博客也特别少,所以没做就搁置下来了. 趁这段时间相对来说比较富裕,于是乎在网上也搜索了一下,发现确实很少,但是有人提到可以用小程序可拖动组件m

  • uniapp开发小程序的经验总结

    1. 新建UI项目 首先,我们的UI是基于ColorUI,当ColorUI没有的样式,就基于Uniapp自带的UI.所以项目的开始要引入这两个UI框架. 如下,新建一个uni-ui项目. 再建立一个ColorUI项目. 如果需要观看ColorUI的效果以便直到自己需要用哪些组件,可以将其运行起来,如下. uni-ui同理.这样只要我们需要的样式都可以在这两个UI取材了. 2. 搭建自己的项目 新建一个自己的uniapp项目,建立完成后.项目结构如下. 接着先引入ColorUI样式: 将Color

  • 使用apifm-wxapi快速开发小程序过程详解

    前言 我们要开发小程序,基本上都要涉及到以下几个方面的工作: 1.购买服务器,用来运行后台及接口程序: 2.购买域名,小程序中需要通过域名来调用服务器的数据: 3.购买 SSL 证书,小程序强制需要 https 的地址,传统无证书不加密的 http 请求微信不支持: 4.后台程序员开发后台程序,这样才能登录后台进行商品管理.订单维护.资金财务管理等等: 5.后台程序员开发小程序可用的 restfull api 接口或者是 websocket 接口: 6.开发的后台及接口程序的安全性.功能性.稳定

  • 微信小程序实现左滑删除效果

    微信小程序实现左滑删除效果的具体代码,供大家参考,具体内容如下 .wxml <scroll-view scroll-y="{{isScroll}}" style='width:{{windowWidth}}px;height:{{windowHeight}}px'> <block wx:key="item" wx:for="{{data}}"> <view data-index='{{index}}' class=&

  • 微信小程序使用uni-app开发小程序及部分功能实现详解

    目录 一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具 二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网络请求 1.依照官网提示安装.导入.使用 2.实战 四.uni-app 里面小程序分包 1.创建分包目录 2.在 pages.json 文件中配置 3.创建分包页面 五.公用方法封装 六.搜索功能 1.搜索组件 2.搜索建议实现 3.本地存储 4.过滤器 七.上拉加载.下拉刷新 1.上拉加载 2.下拉刷

  • 微信小程序 向左滑动删除功能的实现

    微信小程序 向左滑动删除功能的实现 实现效果图: 实现代码: 1.wxml touch-item元素绑定了bindtouchstart.bindtouchmove事件 <view class="container"> <view class="touch-item {{item.isTouchMove ? 'touch-move-active' : ''}}" data-index="{{index}}" bindtouchst

  • 小程序实现左滑删除效果

    本文实例为大家分享了小程序实现左滑删除效果的具体代码,供大家参考,具体内容如下 1.movable-area基本概念 实现思路: 大家仔细去看看官网的文档后再来看我写的这篇文章可能会更好理解. (1)movable-area这个就是定义了一个移动的区域,跟普通的<view></view>的含义是一样的,不同在于,接着往下看: 注意:movable-area 必须设置width和height属性,不设置默认为10px (2)movable-view这个就是一个可移动的视图容器,可以在

  • 微信小程序实现左滑修改、删除功能

    本文实例为大家分享了微信小程序实现左滑修改.删除的具体代码,供大家参考,具体内容如下 wxml: <view class="offer-item" wx:for-items='{{offerList}}'> <!--这里绑定了刚才说的3个函数分别为 touchS,touchM touchE--> <!--这里注意这个 style="{{item.txtStyle}}" ,这是我们一会再js中 将要设置的样式 --> <vie

  • 小程序实现左滑删除功能

    本文实例为大家分享了小程序实现左滑删除功能的具体代码,供大家参考,具体内容如下 <!-- 外层包裹视图 --> <view class="cont"> <!-- 列表 --> <view wx:for="{{list}}" wx:key="index" class="list"> <!-- 滑动删除 --> <view bindtouchstart="

随机推荐