# tui-slide-view 滑动菜单 会员组件

介绍

滑动菜单,主要为左滑操作,wxs实现。

此组件适用于App、H5、微信小程序端,其他小程序使用 tui-swipe-action 组件。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiSlideView from "@/components/thorui/tui-slide-view/tui-slide-view.vue"
export default {
	components:{
		tuiSlideView
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 ✓ (2.9.6+)) ✓(2.9.6+) ✓(2.9.6+) ✓(2.9.6+)

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-slide-view": "/components/thorui/tui-slide-view/tui-slide-view"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础使用

通过 buttons 属性设置菜单按钮。

    <!--uni-app-->
    <tui-slide-view :buttons="buttons"  @click="handleClick">
     <view class="tui-list-cell">
     	<text>左滑菜单(text)</text>
     </view>
    </tui-slide-view>
    
    // data 数据 及 方法
    export default {
     data() {
     	return {
     		buttons: [{
     			text: '标为未读',
     			color: '#fff',
     			background: '#4C4C4C',
     			//额外参数,根据需要传入
     			data:{id:1,custom:2020}
     		}, {
     			text: '不显示',
     			color: '#fff',
     			background: '#FA9D3B'
     		}, {
     			text: '删除',
     			color: '#fff',
     			background: '#FA5151'
     		}]
     	}
     },
     methods: {
     	handleClick(e){
     		console.log(e)
     		let index=Number(e.index)
     		console.log(`你点击了:${this.buttons[index].text}`)
     	}
     }
    }
    
    .tui-list-cell {
    	width: 100%;
    	height: 120rpx;
    	padding: 0 30rpx;
    	box-sizing: border-box;
    	background-color: #fff;
    	display: flex;
    	align-items: center;
    }
    
    <!--微信小程序-->
    <tui-slide-view buttons="{{buttons}}"  bindclick="handleClick">
     <view class="tui-list-cell">
     	<text>左滑菜单(text)</text>
     </view>
    </tui-slide-view>
    
    // data 数据 及 方法
    Page({
      data: {
        buttons: [{
        	text: '标为未读',
        	color: '#fff',
        	background: '#4C4C4C',
        	//额外参数,根据需要传入
        	data:{id:1,custom:2020}
        }, {
        	text: '不显示',
        	color: '#fff',
        	background: '#FA9D3B'
        }, {
        	text: '删除',
        	color: '#fff',
        	background: '#FA5151'
        }]
      },
      handleClick(e){
      	console.log(e.detail)
      	let index=Number(e.detail.index)
      	console.log(`你点击了:${this.data.buttons[index].text}`)
      }
    })
    
    .tui-list-cell {
    	width: 100%;
    	height: 120rpx;
    	padding: 0 30rpx;
    	box-sizing: border-box;
    	background-color: #fff;
    	display: flex;
    	align-items: center;
    }
    
    // Make sure to add code blocks to your code group
    默认显示左滑菜单

    通过 show 属性控制显示隐藏左滑菜单。

      <!--uni-app-->
      <tui-slide-view :buttons="buttons"  :show="true">
       <view class="tui-list-cell">
       	<text>左滑菜单(text)</text>
       </view>
      </tui-slide-view>
      
      // data 数据 及 方法
      export default {
       data() {
       	return {
       		buttons: [{
       			text: '标为未读',
       			color: '#fff',
       			background: '#4C4C4C',
       			//额外参数,根据需要传入
       			data:{id:1,custom:2020}
       		}, {
       			text: '不显示',
       			color: '#fff',
       			background: '#FA9D3B'
       		}, {
       			text: '删除',
       			color: '#fff',
       			background: '#FA5151'
       		}]
       	}
       },
       methods: {
       	
       }
      }
      
      .tui-list-cell {
      	width: 100%;
      	height: 120rpx;
      	padding: 0 30rpx;
      	box-sizing: border-box;
      	background-color: #fff;
      	display: flex;
      	align-items: center;
      }
      
      <!--微信小程序-->
      <tui-slide-view buttons="{{buttons}}"  show="{{true}}">
       <view class="tui-list-cell">
       	<text>左滑菜单(text)</text>
       </view>
      </tui-slide-view>
      
      // data 数据 及 方法
      Page({
        data: {
          buttons: [{
          	text: '标为未读',
          	color: '#fff',
          	background: '#4C4C4C',
          	//额外参数,根据需要传入
          	data:{id:1,custom:2020}
          }, {
          	text: '不显示',
          	color: '#fff',
          	background: '#FA9D3B'
          }, {
          	text: '删除',
          	color: '#fff',
          	background: '#FA5151'
          }]
        }
      })
      
      .tui-list-cell {
      	width: 100%;
      	height: 120rpx;
      	padding: 0 30rpx;
      	box-sizing: border-box;
      	background-color: #fff;
      	display: flex;
      	align-items: center;
      }
      
      // Make sure to add code blocks to your code group
      菜单为图标展示

      不同的 buttons 属性数据格式,以及相关属性的设置,控制菜单展示效果。

        <!--uni-app-->
        <tui-slide-view :buttons="buttonArr" width="100rpx" height="100rpx" radius="100rpx" padding="0">
         <view class="tui-list-cell tui-image__cell">
         	<text>左滑菜单(image)</text>
         </view>
        </tui-slide-view>
        
        // data 数据 及 方法
        export default {
         data() {
         	return {
         		buttonArr: [{
         			src: '/static/images/extend/icon_edit_3x.png',
         			width: '48rpx',
         			height: '48rpx',
         			background: '#fff'
         		}, {
         			src: '/static/images/extend/icon_delete_3x.png',
         			width: '48rpx',
         			height: '48rpx',
         			background: '#fff'
         		}]
         	}
         },
         methods: {
         	
         }
        }
        
        .tui-list-cell {
        	width: 100%;
        	height: 120rpx;
        	padding: 0 30rpx;
        	box-sizing: border-box;
        	background-color: #fff;
        	display: flex;
        	align-items: center;
        }
        .tui-image__cell{
        	height: 120rpx;
        	border-radius: 16rpx;
        	overflow: hidden;
        }
        
        <!--微信小程序-->
        <tui-slide-view buttons="{{buttonArr}}" width="100rpx" height="100rpx" radius="100rpx" padding="0">
         <view class="tui-list-cell tui-image__cell">
         	<text>左滑菜单(image)</text>
         </view>
        </tui-slide-view>
        
        // data 数据 及 方法
        Page({
          data: {
            buttonArr: [{
            	src: '/static/images/extend/icon_edit_3x.png',
            	width: '48rpx',
            	height: '48rpx',
            	background: '#fff'
            }, {
            	src: '/static/images/extend/icon_delete_3x.png',
            	width: '48rpx',
            	height: '48rpx',
            	background: '#fff'
            }]
          }
        })
        
        .tui-list-cell {
        	width: 100%;
        	height: 120rpx;
        	padding: 0 30rpx;
        	box-sizing: border-box;
        	background-color: #fff;
        	display: flex;
        	align-items: center;
        }
        .tui-image__cell{
        	height: 120rpx;
        	border-radius: 16rpx;
        	overflow: hidden;
        }
        
        // Make sure to add code blocks to your code group

        # Slots

        插槽名称 插槽说明
        - -

        # Props

        属性名 类型 说明 默认值
        buttons Array 菜单数据 [{
          text: '删除',
          color: '#fff',
          src: '',
          width: '',
          height: '',
          background: '#FF2100'
        }]
        textField v3.0.0+ String 菜单数据显示文本key text
        srcField v3.0.0+ String 菜单数据src图标地址key src
        color v3.0.0+ String 菜单数据文本颜色,优先级小于buttons中color #fff
        width String 菜单宽度,为图标展示时使用 100%
        height String 菜单高度,为图标展示时使用 100%
        padding String 菜单padding值 0 30rpx
        radius String 菜单圆角设置,为图标展示时使用 0
        fontSize [Number, String] 菜单字体大小,单位rpx 32
        disable Boolean 是否禁用菜单滑动事件 false
        show Boolean 是否默认显示滑动菜单 false
        duration Number 菜单过渡动画时长,单位ms 350
        throttle Number 滑动多少距离菜单展开,单位px 30
        showMask Boolean 是否显示mask,设为true则不可同时打开多个菜单 false
        marginTop V2.9.0+ Number,String 组件 margin-top值,单位rpx 0
        marginBottom V2.9.0+ Number,String 组件 margin-bottom值,单位rpx 0
        autoClose V2.9.2+ Boolean 点击按钮是否自动关闭菜单,为false则需要手动进行关闭,需要结合open和close事件同步状态 true
        buttons 属性Object参数说明

        通过 loading 属性设置按钮为加载状态,可结合 disabled 使用。

        [{
        	text: '删除', //菜单按钮显示文本,可使用textField属性指定key
        	color: '#fff',//菜单按钮文本颜色
        	src: '', // img地址 只显示图标时使用,可使用srcField属性指定key
        	width: '', //img 宽
        	height: '', //img 高
        	background: '#FF2100' //菜单按钮背景色
        }]
        

        # Events

        注:uni-app端绑定事件使用@前缀,如@click;微信小程序原生使用bind前缀,如bindclick

        事件名 说明 回调参数
        click 菜单点击事件 {index:索引值,data:自定义data数据 }
        close 关闭菜单事件,属性autoClose为false时需要进行同步状态 { }
        open 打开菜单事件,属性autoClose为false时需要进行同步状态 { }

        # 预览

        请以移动端效果为准,touch事件目前尚未完全在PC端做兼容。

        # 特别说明

        该组件为 会员组件,非开源内容,需开通会员才可获取使用。

        # 线上程序扫码预览

        ThorUI组件库 H5二维码 ThorUI示例
        ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码
        Last Updated: 5/20/2024, 5:41:09 PM