更新记录

1.0.4(2022-01-10)

修复

1.0.3(2022-01-10)

优化 单行高度auto

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue app-nvue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

QQ: 1299974394

使用方法

/* 引用 */
import tSlide from "@/components/t-slide/t-slide.vue"

components:{tSlide}

/* 使用 */
<template>
    <view class="t-wrap" >
      <t-slide ref="slide"  @edit="edit" @del="del" @itemClick="itemClick">
      //  内容区域 自定义样式
           <template v-slot:default="{item}">
                <view>
                       {{item.content}}
                </view>
           </template>
      </t-slide>
    </view>
</template>

赋值!!!!!


this.$nextTick(()=>{
    this.$refs.slide.assignment(this.dataList)  //this.dataList 你的数据数组
})

参数

名称 类型 默认 说明
height String auto 单行高度
btnWidth Number 200 按钮宽度
btnArr Array 滑动展示的按钮

btnArr

  // 默认值
  {
    name:'编辑',            //名称
    background:'#00aaff',  //背景色
    color:'#fff',          //文字颜色
    events:'edit'         //事件名称
  },
  {
    name:'删除',
    background:'#ff5500',
    color:'#fff',
    events:'del'
  }

事件

名称 说明
itemClick 点击单行返回数据

简单示例


<template>
    <view class="t-wrap" >
      <t-slide ref="slide"  @edit="edit" @del="del" @itemClick="itemClick">
           <template v-slot:default="{item}">
                <view class="t-conten">
                    <image :src="item.img" mode="" v-if="item.img"  class="image"></image>
                    <text class="t-conten-text">{{item.content}}</text>
                </view>
           </template> 
      </t-slide>
    </view>
</template>

<script>
    import tSlide from "@/components/t-slide/t-slide.vue"
    export default { 
        components:{tSlide},
        data() {
            return {
                dataList:[],
            }
        },
        onLoad: function () {
            for (var i = 0; i < 7; i++) {
              this.dataList.push({
                content:"瓶身描绘的牡丹一如你初妆, 冉冉檀香透过窗心事我了然, 宣纸上走笔至此搁一半",
                id:i,
                img:[1,2,5].indexOf(i)==-1?'https://cdn.uviewui.com/uview/swiper/3.jpg':'',
              })
            }
            this.$nextTick(()=>{
                this.$refs.slide.assignment(this.dataList)
            })
          },
        methods: {
            //点击单行
            itemClick(data){
                console.log('点击',data)
            },
            //删除
            del(data){
                console.log('删除',data)
                uni.showToast({
                    title:'删除ID--'+data.id,
                    icon:'none'
                })
            },
            //编辑
            edit(data){
                console.log('编辑',data)
                uni.showToast({
                    title:'编辑ID--'+data.id,
                    icon:'none'
                })
            },
        }
    }
</script>

<style lang="scss">

.t-wrap{
    padding: 0 30upx;
    .t-conten{
        display: flex;
        flex-direction:row !important;
        padding: 10upx 0;
        .image{
            width:400upx;
            height:100upx;
            margin-right: 10upx;
        }
    }
}
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问