feat(h5): previewImage add close btn and add navigation

packages/uni-h5/src/service/api/media/previewImage/ImagePreview.tsx

@@ -7,10 +7,12 @@ import {
   watch,
   nextTick,
 } from 'vue'
+import { StyleValue } from '@vue/runtime-dom'
 import { defineSystemComponent } from '@dcloudio/uni-components'
 import { Swiper, SwiperItem } from '@dcloudio/uni-components'
 import { usePreventScroll } from '../../../../helpers/usePreventScroll'
 import ImageView from './ImageView'
+import { createSvgIconVNode, ICON_PATH_CLOSE } from '@dcloudio/uni-core'
 
 const props = {
   urls: {
@@ -82,6 +84,21 @@ export default /*#__PURE__*/ defineSystemComponent({
       indexRef.value = event.detail.current
     }
 
+    const closeBtnStyle: StyleValue = {
+      position: 'absolute',
+      'box-sizing': 'border-box',
+      top: '0',
+      left: '0',
+      width: '60px',
+      height: '44px',
+      padding: '6px',
+      'line-height': '32px',
+      'font-size': '26px',
+      color: 'white',
+      'text-align': 'center',
+      cursor: 'pointer',
+    }
+
     return () => {
       return (
         <div
@@ -99,6 +116,7 @@ export default /*#__PURE__*/ defineSystemComponent({
           onClick={onClick}
         >
           <Swiper
+            navigation="auto"
             current={indexRef.value}
             // @ts-ignore
             onChange={onChange}
@@ -118,6 +136,9 @@ export default /*#__PURE__*/ defineSystemComponent({
               </SwiperItem>
             ))}
           </Swiper>
+          <div style={closeBtnStyle}>
+            {createSvgIconVNode(ICON_PATH_CLOSE, '#ffffff', 26)}
+          </div>
         </div>
       )
     }