Invalid reason:
Because two attributes of the official document are not written, and we have not written them, it will not take effect
1 The maximum sliding distance of maxdistance slider is generally the number of buttons multiplied by the button width
2 Areawidth component width (if no reference causes the component occupancy width to be 0, the page will not be displayed)
be careful:
Here, the width
in option
must use PX
, if you use rpx
, there will be UI problems on different devices, maxDistance= the width length of two options
, maxDistance
is the type of number
Correct code:
<AtSwipeAction
maxDistance={140} // Button width * number of buttons
areaWidth={Taro.getSystemInfoSync().windowWidth * 1} //Dynamically get the width of different devices
autoClose //click the button to close it automatically
onClick={(option, btnIndex) => { }} //Click to cancel Triggered after deleting the button, one parameter is the currently clicked option item, the second parameter is the index of the button 0 1
options={[
{
text: 'cancel',
style: {
justifyContent: 'center',
width: '70px',
padding: 0,
}
},
{
text: 'Delete',
style: {
justifyContent: 'center',
width: '70px',
padding: 0,
}
}
]}>
<View>
Content
</View>
</AtSwipeAction>
Read More:
- How to Fix “HTTP 405 method not allowed” Error
- How to Solve Vue project Startup Error (Node Upgrade issue)
- Vue: How to Fix “not displaying the holder in IE9 and below”
- [Solved] Error: EPERM: operation not permitted (Permissions issue)
- How to Solve OffsetParent is not set error
- How to Solve “Vue is not defined” Error
- ERROR in [eslint] ESLint is not a constructor (How to Solve)
- How to Test whether the property value of each property in the object is not empty
- @requestbody: How to Use or Not Use
- How to React page to achieve entry and exit animation
- Javascript: How to Use Date.Now() to implement front-end frequency limit
- How to Use DOM to operate CSS
- How to introduce iconfont into uni-app
- How to use HPQC on Chrome browser
- WPF: How to implement Text Stroke
- How to Solve Error: [Vue warn]: Missing required prop: “value”
- The solution to the problem that the custom styles of UI components such as element-ui in the vue project do not take effect
- How to Solve Vue cli syntax Close Error
- How to use Runtime.getRuntime().Exec()
- React error boundary (What You Should Know & How to Solve)