How to use WeChat SlideView component in WeChat applet (with examples)

The content of this article is about how to use the WeChat SlideView component (with examples) in the WeChat applet. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

WeChat applet imitates WeChat SlideView component.

Use

1. Install slide-view

from the mini program base library version 2.2.1 or above, and developer tools 1.02.1808300 or Starting from the above, the mini program supports using npm to install third-party packages.

npm install --save miniprogram-slide-view

2. Add slide-view custom component configuration in page.json of the page that needs to use slide-view

{  
    "usingComponents": {    
        "slide-view": "miniprogram-slide-view"
    }
}

3. Reference slide-view in the WXML file

Each slide-view provides two nodes, which are used to carry the child nodes provided when the component is referenced. The left node is used to carry the node displayed by slide-view when it is still. The width and height of this node should be the same as the width and height passed in to slide-view. The right node is used to host the node displayed when sliding, and its width should be the same as the slideWidth passed in to slide-view.

<slide-view>
  <view>这里是插入到组内容</view>
  <view>
    <view>标为已读</view>
    <view>删除</view>
  </view>
</slide-view>

Parameter description:

• width: Number type, the default value displays the width of the screen, the width of the slide-view component

• height: Number type, default value 0, the height of the slide-view component

• slide-width: Number type, default value 0, the width of the sliding display area (the default height is the same as the slide -view is the same)

Running effect

Others

slide-view project address: https://github.com/wechat-min...

The above is the detailed content of How to use WeChat SlideView component in WeChat applet (with examples). For more information, please follow other related articles on the PHP Chinese website!