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:
- Method of adding operation button for each line of data in DataGrid of easyUI
- CSS to achieve dynamic display of picture text by mouse touch
- The solution to the problem that the custom styles of UI components such as element-ui in the vue project do not take effect
- [Solved] Cannot read properties of undefined (reading ‘propsData‘)“
- [Solved] Binding onclick event in JS: for loop: error uncaught typeerror: cannot set properties of undefined (setting ‘classname’)
- Vue3.X Attribute Inheritance error [How to Solve]
- Asynchronous loading method of Baidu map
- [Vue warn]: Error in mounted hook: “Error: please transfer a valid prop path to form item“
- H5 page left and right stretch content area
- Vue wran name Error: Unkown custom element [How to Solve]
- Anti card limited Drag Based on react draggable drag
- [Solved] Vue binding dynamic inline style Error: transform:rotate()
- [Solved] Echarts Error: Uncaught (in promise) Error: Initialize failed: invalid dom.
- [Solved] Error in mounted hook: “Error: please transfer a valid prop
- Vue modifies the value passed by props error: Avoid mutating a prop directly since the value will be overwritten whenever the par
- uniapp Use render Function Error: [Vue warn]: Error in beforeCreate hook: “TypeError: Cannot read property ‘_i‘ of
- Solve Google browser font reduction to 12px
- [Solved] VUE D:\project\vueProject\vue-02\src\components\hello.vue 5:5 error Parsing error: x-invalid-end-tag
- vue Error: Uncaught SyntaxError: Invalid shorthand property initializer
- Please transfer a valid prop path to form item