。

src/components/BottomMoadl/index.jsx

@@ -1,105 +1,72 @@
 import Taro from '@tarojs/taro'
-import { View, Text } from '@tarojs/components'
-import DeleteTravel from '@/assets/icons/Travel/delete.png'
+import { View } from '@tarojs/components'
 import RecommendedCard from '@/components/foodCards/RecommendedCard'
 import SpinBox from "@/components/Spin/SpinBox";
-
-import { useState, useEffect } from 'react'
-import { deleteTravel, getRecommendList } from '@/services/travel'
-
+import { useState, useEffect,useRef } from 'react'
+import {  getRecommendList } from '@/services/travel'
 import './style.css'
 
 
 export default (props) => {
   const { frameTitle, onRecommend, flag, ico, textNext, location, dayNumber, travelId, handelAddTravel } = props
 
-  // const [flag, setFlag] = useState(false)
-  // const [wrapAnimate, setWrapAnimate] = useState('wrap wrapAnimate')
-  // const [frameAnimate, setFrameAnimate] = useState('frame-wrapper frameAnimate')
   let wrapAnimate = 'wrap wrapAnimate'
-  let frameAnimate = 'frame-wrapper frameAnimate'
+  let frameAnimate = 'frame-wrapper'
   const [textNextSum, setTextNext] = useState(1)
   const [recommendContent, setRecommendContent] = useState([])
   const [loading, setLoading] = useState(false)
 
   const hideFrame = () => {
-    wrapAnimate = 'wrap wrapAnimateOut'
-    frameAnimate = 'frame-wrapper frameAnimateOut'
     onRecommend()
-
-  }
-
-  const catchNone = () => {
-    //阻止冒泡
-
-  }
-  const handelText = () => {
-    handleTextNext()
-
   }
 
-
   useEffect(() => {
     setLoading(true)
     getRecommendList({ location: location, pageNum: textNextSum, pageSize: 3 }).then(e => {
       setRecommendContent(e.records)
       setLoading(false)
-
     }).catch(s => {
       setLoading(false)
-
     })
   }, [location, textNextSum])
 
-
+  //用来让下面的小图标旋转
+  const rotateRef=useRef()
+  const [r,setR]=useState(90)
   //换一批
   const handleTextNext = (e) => {
+    rotateRef.current.style.transform=`rotate(${r}deg)`
+    setR(r+90)
     setTextNext(textNextSum + 1)
-
     e.stopPropagation()
-
-
   }
 
   return (
-    flag && <view  >
+    flag && <view>
       <view className={wrapAnimate} style='background:rgba(0,0,0,0);'></view>
       <view onClick={hideFrame} className={frameAnimate}>
-        <view onClick={catchNone} className='frame'>
+        <view className='frame'>
           {/* 标题  */}
           <view className='title-wrapper '>
             <view>{frameTitle}</view>
-            {/* <image onClick={hideFrame} src={DeleteTravel} mode='widthFix'></image> */}
           </view>
           {/* 内容 */}
-
           <View style='overflow-x: hidden;'>
             <SpinBox loading={loading}>
-
               {
                 recommendContent.map((item, index) =>
-
-
-
                   <RecommendedCard key={index} item={item} det={item} editable='1' location={location} travelId={travelId} dayNumber={dayNumber} handelAddTravel={handelAddTravel} />
                 )
               }
               {props.children}
             </SpinBox>
-
             <view className='bottom-text' onClick={handleTextNext}>
-              <image src={ico} />
+              <image ref={rotateRef} src={ico} />
               <text>{textNext}</text>
             </view>
           </View>
-
         </view>
-
       </view>
-
     </view>
   )
-
-
-
-}
+}

src/components/BottomMoadl/style.css

@@ -8,52 +8,12 @@
     background: rgba(0, 0, 0, 0.35);
   }
 }
-.wrapAnimateOut {
-  animation: wrapAnimateOut 0.2s ease forwards;
-}
-@keyframes wrapAnimateOut {
-  0% {
-    background: rgba(0, 0, 0, 0.35);
-  }
-
-  100% {
-    background: rgba(0, 0, 0, 0);
-  }
-}
-.frameAnimate {
-  animation: frameAnimate 0.2s ease forwards;
-}
-@keyframes frameAnimate {
-  0% {
-  }
-  100% {
-    opacity: 1;
-    top: 0vh;
-  }
-}
-.frameAnimateOut {
-  animation: frameAnimateOut 0.2s ease forwards;
-}
-@keyframes frameAnimateOut {
-  0% {
-    opacity: 2;
-    top: 0vh;
-  }
-  50% {
-    opacity: 1;
-    top: 50vh;
-  }
-  100% {
-    opacity: 0;
-    top: 100vh;
-  }
-}
 .frame-wrapper {
   position: fixed;
   height: 100vh;
   width: 100vw;
   z-index: 2;
-  top: 50vh;
+  top: 0;
 }
 .frame {
   background: #fff;
@@ -84,10 +44,7 @@
   padding: 0 5vw;
   margin-right: -5vw;
 }
-/* .flex {
-  display: flex;
-  align-items: center;
-} */
+
 .wrap {
   position: fixed;
   z-index: 1;
@@ -109,6 +66,7 @@
   width: 32px;
   height: 32px;
 }
+
 .bottom-text > text {
   width: 110px;
   font-size: 30px;