newsbanner

src/pages/project/index.js

 import './index.scss'
 import ProjectItem from './item'
 import Banner from './banner'
+import Newsbanner from './newsbanner'
 import HelpGroupBanner from './swiper'
 // import ActivityItem from '../activity/item'
 import ready from '@utils/ready'
 
   componentWillMount() {
     ready.queue(() => {
+
+      Taro.hideTabBar()
       this.getLocation()
 
       Taro.setNavigationBarTitle({ title: this.props.userInfo.miniApp.name })
 
     if (this.props.curCity.id) {
       ready.queue(() => {
-        Taro.hideTabBar()
+        // Taro.hideTabBar()
         this.loadData()
       })
     }
     if (curCity.id) {
       payload.cityId = curCity.id
     }
-    // debugger
+
     this.setState({
-      newsList: []
+      newsList: [{}]
     }, () => {
       queryNewsList(payload).then(res => {
         this.setState({
     })
   }
 
-  // loadActivityList() {
-  //   const { curCity } = this.props
-  //   const payload = {
-  //     pageNumber: 1,
-  //     pageSize: 1
-  //   }
-  //   if (curCity.id) {
-  //     payload.cityId = curCity.id
-  //   }
-  //   queryActivityList(payload).then(res => {
-  //     this.setState({
-  //       activityList: res.list || []
-  //     }, () => {
-  //       console.log(this.state.activityList)
-  //     })
-  //   })
-  // }
 
   loadList() {
     const { keywords } = this.state
           title: '当前城市暂无楼盘',
           icon: 'none'
         })
-
       }
-
       Taro.hideLoading()
       this.setState({
         loaded: true
                 }
 
               </View>
-              {
-                newsList.length &&
-                <View style="background-color:#fff">
-                  <View className="notice-box">
-                    <View style="display: flex;align-items: center;">
-                      <Image className="notice-icon" src={require('@assets/notice.png')}></Image>
-                      <Swiper
-                        className='notice-swiper'
-                        circular
-                        autoplay
-                        interval="3000"
-                        onChange={this.changeCurrent.bind(this)}
-                        vertical="true"
-                      >
-                        {
-                          newsList.map((list, inx) => {
-                            return (
-                              <SwiperItem key={`news-${inx}`}>
-                                <View className="notice-text" onClick={this.handleNoticeClick.bind(this, list)}>
-                                  {list.newsName}
-                                </View>
-                              </SwiperItem>
-                            )
-                          })
-                        }
-                      </Swiper>
-                    </View>
-                    {newsList.length > 1 &&
-                      <View className="notice-more" onClick={this.toNewsList}>
-                        更多 <Text className="iconfont icon-more"></Text>
-                      </View>
-                    }
-                  </View>
-                </View>
-              }
+              <Newsbanner cityId={curCity.id} onClick={this.handleNoticeClick} onClickMore={this.toNewsList} />
 
               {/* 推荐楼盘 */}
               {this.renderProjectList()}

src/pages/project/newsbanner/index.js

+import Taro, { Component } from '@tarojs/taro'
+import { View, Swiper, SwiperItem, Image } from '@tarojs/components'
+import { queryNewsList } from '@services/news'
+
+export default class SwiperBanner extends Component {
+  static options = {
+    addGlobalClass: true,
+  };
+
+  state = {
+    lastCity: undefined,
+    list: [],
+    current: 0,
+  }
+
+  timer = null;
+
+  componentWillReceiveProps(nextProps) {
+    
+    if (nextProps.cityId != this.state.lastCity) {
+      const payload = {
+        pageNumber: 1,
+        pageSize: 999,
+        cityId: nextProps.cityId,
+      }
+
+      queryNewsList(payload).then(res => {
+        this.clearTimer()
+
+        this.setState({
+          list: res.records || [],
+          lastCity: nextProps.cityId,
+          current: 0,
+        }, () => {
+          if (this.state.list.length > 1) {
+            this.timer = setInterval(() => {
+              let current = this.state.current + 1
+              if (current >= this.state.list.length) {
+                current = 0
+              }
+  
+              this.setState({ current })
+            }, 3000)
+          }
+        })
+      })  
+    }
+  }
+
+  clearTimer = () => {
+    if (this.timer) {
+      clearInterval(this.timer)
+      this.timer = null
+    }
+
+  }
+
+  componentWillUnmount() {
+    this.clearTimer()
+  }
+
+  render() {
+    if (!this.state.list.length) return null;
+
+    return (
+      <View className="notice-box">
+        <View style="display: flex;align-items: center;">
+          <Image className="notice-icon" src={require('@assets/notice.png')}></Image>
+          <Swiper
+            className='notice-swiper'
+            circular
+            // autoplay
+            // interval="3000"
+            vertical="true"
+            current={this.state.current}
+          >
+            {
+              this.state.list.map((item, inx) => {
+                return (
+                  <SwiperItem key={`news-${inx}`}>
+                    <View className="notice-text" onClick={() => this.props.onClick(item)}>
+                      {item.newsName}
+                    </View>
+                  </SwiperItem>
+                )
+              })
+            }
+          </Swiper>
+        </View>
+        {this.state.list.length > 1 &&
+          <View className="notice-more" onClick={this.props.onClickMore}>
+            更多 <Text className="iconfont icon-more"></Text>
+          </View>
+        }
+      </View>
+    )
+  }
+}