❤
npm
Sign UpSign In

mp-components

0.0.137 • Public • Published 
npm install mp-components

Utils

Name Type Description
reachBottom Function(root, target, callback) Listen to the bottom of the target element and execute the callback function when it is reached.

Components

mp-nav-bar

mp-tab

mp-ellipsis

mp-popup

mp-dropdown-menu

mp-dropdown-menu-item

mp-button

mp-button-group

mp-box

mp-dots

mp-pk-card

mp-pk-progress-bar

mp-image

mp-nav-bar-home

mp-line

mp-text-line

mp-tab-panel

mp-tab-panel-item

mp-expand

mp-action-sheet

mp-expand-enhanced

mp-collapse

mp-nav-bar

  • properties

bg: String、 zIndex: Number、 custom: Boolean

  • events

height

  • slots

left、title、 default

Tip: If the custom property is true, the left and title slots are invalid

Demo


<mp-nav-bar custom="{{true}}">
    <view slot="left">back</view>
    <view slot="title">title</view>
    <view>custom</view>
</mp-nav-bar>

mp-ellipsis

  • properties

content: String、 contentClass: String、 contentStyle: String、 rows: Number、 size: String、 lineHeight: String、ellipsisColor: String、forceShowSlot： Boolean, forceShowSlotPosition: 'end' | 'suffix', isAsync: Boolean, offset: Number

  • slot

default

Demo


<mp-ellipsis content="what???" rows="{{2}}">
    <view>Slot</view>
</mp-ellipsis>

mp-tab

  • properties

data: Array、 labelField: String | null、 active: Number、 height: String、gap: String、size: String、activeSize: String、color: String、 activeColor: String、 activeLineHeight: String、 activeLineColor: String、 border: String、 borderColor: String、 justifyBetween: Boolean、itemStyle: String、activeItemStyle: String、 startSize: Number、endSize: Number => font-size animation scale from size to start and then end

  • events

change

Demo


<comp data="{{['tab1', 'tab2']}}" height="120rpx" active="{{curTab}}" itemClass="item" catch:change='onChange'></comp>

mp-popup

  • properties

visible: Boolean、 bg: String、 maskClosable: Boolean、 duration: Number、 type: String、 contentClass: String

type -> bottom、top、left、right、center、center-scale

  • events

open、opened、close、 closed

  • slot

default

mp-dropdown-menu

  • properties

duration: Number、 bg: String、 maskClosable: Boolean

  • events

open、opened、close、 closed、 change

  • methods

close

  • slot

default

mp-dropdown-menu-item

  • slot

default、 title


<mp-dropdown-menu maskClosable="{{true}}" catch:change="onMenuChange" catch:close="close" catch:closed="closed"
                  catch:open="open" catch:opened="opened">
    <mp-dropdown-menu-item>
        <view slot="title" class="menu-item">One</view>
        <view style="background: #ffffff;">Content</view>
    </mp-dropdown-menu-item>
    <mp-dropdown-menu-item>
        <view slot="title" class="menu-item">Two</view>
        <view style="background: #ffffff;">Content2</view>
    </mp-dropdown-menu-item>
    <mp-dropdown-menu-item>
        <view slot="title" class="menu-item">Three</view>
        <view style="background: #ffffff;">Content3</view>
    </mp-dropdown-menu-item>
</mp-dropdown-menu>

.menu-item {
    width: 100%;
    padding: 20rpx 0;
}

mp-button

  • properties

disabled: Boolean、 padding: String、 loading: Boolean、 loadingSize: Boolean、 dark: Boolean、 ghostDark: Boolean、 ghostLight: Boolean、radius: String

  • event

tap


<mp-button bindtap="handleTap">
    填充按钮
</mp-button>

Effect

mp-button-group

  • properties

gap: String


<mp-button-group>
    <mp-button ghostLight>了解详情</mp-button>
    <mp-button ghostDark>立即订购</mp-button>
</mp-button-group>

mp-box

  • properties

ratio: Number

mp-dots

  • properties

count: Number、current: Number、 radius: String、 gap: String、color: String、activeColor: String、 activeWidth: String、width: String、height: String、radius: String

  • event

change

mp-pk-card

  • properties

bg: String、bgOpacity: Number、 images: Array、 gap: String、 deg: Number、 pLeft: String

  • slot

left、right

  • events

offset

demo


<view style="height: 500rpx;">
    <mp-pk-card deg="{{-10}}">
        <view slot="left" style="height: 100%; width: 100%; color: red; display: flex; align-items: flex-end;">
            Left
        </view>
        <view slot="right"
              style="height: 100%; width: 100%; color: red; display: flex; align-items: flex-end; justify-content: flex-end;">
            Right
        </view>
    </mp-pk-card>
</view>

mp-pk-progress-bar

  • properties

height: String、 radius: String、 bg: String、 chunkWidth: String、 value: String、 left: String、 right: String、 deg: Number

mp-image

  • properties

src: String、 lazy: Boolean、 mode: String、 radius: String、bg: String

mp-nav-bar-home

  • properties

bg: String, iconStyle: String, backStyle: String, homeStyle: String, backIcon: String, homeIcon: String, homePath: String, homePathIsTabBar: Boolean, duration: Number, customBackEvent: Boolean, placeholder: Boolean

  • events

height

back

<!-- bg, iconStyle, backStyle, homeStyle, backIcon, homeIcon, homePath, homePathIsTabBar, duration => default value -->

<mp-nav-bar-home>
    <view>Title</view>
</mp-nav-bar-home>

<!-- with default value -->
<mp-nav-bar-home
    bg="rgba(255, 255, 255, 1)"
    iconStyle="margin-left: 32rpx;"
    backStyle="width: 56rpx; height: 56rpx;"
    homeStyle="width: 40rpx; height: 40rpx;"
    backIcon="https://source-1259320891.cos.ap-shanghai.myqcloud.com/medias/nav-back.png"
    homeIcon="https://source-1259320891.cos.ap-shanghai.myqcloud.com/medias/home-icon.png"
    homePath=""
    homePathIsTabBar="{{true}}"
    duration="{{400}}"
>
    <view>Title</view>
</mp-nav-bar-home>

mp-line

  • properties

top: Boolean, right: Boolean, bottom: Boolean, left: Boolean, radius: String, color: String, shadow: String


<view style="width: 50%; margin: 0 auto;">
    <mp-box>
        <mp-line top right bottom left color="blue" shadow="0 8rpx 16rpx 0 blue" radius="8rpx">
            <mp-box>
                <view bindtap="log">???</view>
            </mp-box>
        </mp-line>
    </mp-box>
</view>
<view style="height: 60rpx;"></view>
<mp-line top right bottom left color="blue" shadow="box-shadow: 0 8rpx 16rpx 0 rgba(0, 0, 0, 0.06)">
    <mp-box>
        <view bindtap="log">???</view>
    </mp-box>
</mp-line>

<view style="height: 20rpx;"></view>
<view style="border: 1rpx solid purple; border-radius: 8rpx;">
    <mp-box></mp-box>
</view>
<view style="height: 20rpx;"></view>

<mp-line top color="red">
    <mp-box ratio="{{3/4}}">
        <view>???</view>
    </mp-box>
</mp-line>
<view style="height: 20rpx;"></view>
<mp-line left color="blue">
    <mp-box ratio="{{3/4}}">
        <view>???</view>
    </mp-box>
</mp-line>
<view style="height: 20rpx;"></view>
<mp-line bottom color="yellow">
    <mp-box ratio="{{3/4}}">
        <view>???</view>
    </mp-box>
</mp-line>
<view style="height: 20rpx;"></view>
<mp-line right color="green">
    <mp-box ratio="{{3/4}}">
        <view>???</view>
    </mp-box>
</mp-line>

mp-text-line

  • properties

line: Number, text: String

mp-tab-panel、mp-tab-panel-item

有些场景只用到左右切换页面，并且不支持手势切换，可以用这个组件
  • properties

height: String、 current: Number、 duration: Number


<mp-tab-panel current="{{current}}">
    <mp-tab-panel-item>One</mp-tab-panel-item>
    <mp-tab-panel-item>Two</mp-tab-panel-item>
    <mp-tab-panel-item>Three</mp-tab-panel-item>
</mp-tab-panel>

mp-expand

  • properties

custom: Boolean 可以自定义 默认显示的内容

direction: "top"、"bottom"、"left"、"right"; default is "top"

duration: Number; default is 300ms

iconBg: String

bg: String

  • events

toggle

  • slot

default 默认显示的内容 custom 自定义显示的内容 (properties 传入 custom="{{true}}" 时生效)


<view class="add-feed-box">
    <mp-expand catch:toggle="toggle">
        <view class="add-feed-icon-2 {{expandVisible ? 'expand' : ''}}">
            <image class="icon-item" mode="aspectFill"
                   src="https://sit-app-h5-1306106726.cos.ap-shanghai.myqcloud.com/prod/feed-image-icon.png"></image>
            <image class="icon-item" mode="aspectFill"
                   src="https://sit-app-h5-1306106726.cos.ap-shanghai.myqcloud.com/prod/feed-video-icon.png"></image>
            <view class="icon-item"></view>
        </view>
    </mp-expand>
</view>

Page({
	data: {
		expandVisible: false
	},
	toggle({ detail }) {
		this.setData({ expandVisible: detail.visible })
	}
})
.add-feed-icon-2 {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    transition: height 0.3s ease;
    background-color: rgba(0, 0, 0, 0.32);
    overflow: hidden;
}

.add-feed-icon-2.expand {
    height: 364rpx;
}

.icon-item {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50rpx;
    margin-bottom: 32rpx;
}

Effect

mp-action-sheet

  • properties

zIndex: Number, topBg: String, bottomBg: String, gap: String

  • slot

top、bottom


<mp-action-sheet>
    <view slot="top" class="initial">
        <view style="padding: 40rpx 0 0 0; display: flex; align-items: center; justify-content: space-between;">
            <view>
                <block wx:if="{{visible}}">
                    <text>微信用户昵称：杨苏州</text>
                </block>
            </view>
            <image style="width: 56rpx; height: 56rpx;"
                   src="https://sit-app-h5-1306106726.cos.ap-shanghai.myqcloud.com/prod/clear-screen-icon.png"
                   bind:tap="toggle2"></image>
        </view>
        <mp-collapse visible="{{visible}}">
            <mp-expand-enhanced style="color: #ffffff;" text="{{text}}" expand="{{expand}}" initialLine="2">
                <view slot="left">
                    <button>话题</button>
                    <button>地址</button>
                </view>
                <view slot="right" style="background: #6E1013; padding: 4rpx 2rpx;" bind:tap="toggle">
                    {{expand ? '收起' : '展开'}}
                </view>
            </mp-expand-enhanced>
        </mp-collapse>
    </view>
    <view slot="bottom" class="initial">
        <Inp/>
    </view>
</mp-action-sheet>

Page({
	data: {
		expand: false,
		visible: true,
		text: '嘿嘿嘿好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊嘿嘿嘿好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊好多好多好饭好歌词的哈吃不饱啊咋办啊',
		src: 'https://qa-data.roxmotor.com/ccms-service/1747543957778604032-video/1718171849640.mp4?sign=q-sign-algorithm%3Dsha1%26q-ak%3DAKIDKTLyKPDk11kBOL1QZR2MfneEYcPvA9tM%26q-sign-time%3D1718187731%3B1718191331%26q-key-time%3D1718187731%3B1718191331%26q-header-list%3Dhost%26q-url-param-list%3D%26q-signature%3Ddb47f518df071526bf861b7c5af48d8f6e5fffb1',
	},
	toggle: function () {
		this.setData({ expand: !this.data.expand })
	},
	toggle2: function () {
		this.setData({ visible: !this.data.visible })
	},
	onLoad: function (options) {

	},
});

mp-expand-enhanced

  • properties

expand: Boolean, text: String, initialLine: Number, gap: String, position: String, initExpandVisible: Boolean

position 可选值 "start"、"center"、"end"，默认 "end"

  • slot

left、right、default

mp-collapse

  • properties

visible: Boolean, duration: Number

  • slot

default

mp-fade-slide-up

  • properties

absolute: Boolean, fixed: Boolean, position: String, visible: Boolean, duration: Number, offset: String, shadow: String, radius: String, bg: String

  • slot

default

Readme

Keywords

Package Sidebar

Install

npm i mp-components

Repository

gitcode.net/weixin_38726348/mp-components.git

Weekly Downloads

103

Version

0.0.137

License

MIT

Unpacked Size

86.1 kB

Total Files

96

Last publish

Collaborators

  • a-drowned-fish
Try on RunKit
Report malware