静态页面

src/pages/index/index.js

@@ -17,13 +17,14 @@ export default class Index extends Component {
     ],
     StoreList: ['', '', '', '', ''],
     NavList: [
-      { id: 1, img: require('../../assets/img/icon1.png'), name: '雅居宝' },
-      { id: 2, img: require('../../assets/img/icon2.png'), name: '乐粉福利' },
-      { id: 3, img: require('../../assets/img/icon3.png'), name: '乐趣头条' },
-      { id: 4, img: require('../../assets/img/icon4.png'), name: '乐客联盟' }
+      { id: 1, img: require('@/assets/img/icon1.png'), name: '雅居宝' },
+      { id: 2, img: require('@/assets/img/icon2.png'), name: '乐粉福利' },
+      { id: 3, img: require('@/assets/img/icon3.png'), name: '乐趣头条' },
+      { id: 4, img: require('@/assets/img/icon4.png'), name: '乐客联盟' }
     ]
   }
   render () {
+    const { NavList, StoreList, BannerData } = this.state
     return (
       <View className='Page'>
 
@@ -35,15 +36,17 @@ export default class Index extends Component {
             <View>
               <View>
                 <View className='DingWei'>
-                  <Image mode='widthFix' src='../../assets/img/icon5.png' />
+                  <Image mode='widthFix' src={require('@/assets/img/icon5.png')} />
                   <Text>南京市</Text>
                 </View>
                 <Swiper className='Swiper' indicatorColor='rgba(0,0,0,0.4)' indicatorActiveColor='#fff' circular indicatorDots autoplay>
-                  {this.BannerData.map((item, index) => (
-                    <SwiperItem key={index}>
-                      <Image mode='widthFix' className='centerLabel' src={item.img} />
-                    </SwiperItem>
-                  ))}
+                  {
+                    BannerData.map((item, index) => (
+                      <SwiperItem key={`Swiper-${index}`}>
+                        <Image mode='widthFix' className='centerLabel' src={item.img} />
+                      </SwiperItem>
+                    ))
+                  }
                 </Swiper>
               </View>
             </View>
@@ -51,14 +54,16 @@ export default class Index extends Component {
 
           {/* nav */}
           <View className='Nav flex-h'>
-            {this.NavList.map((item, index) => (
-              <Navigator className='flex-item' url={null} key={index}>
-                <View>
-                  <Image mode='heightFix' className='centerLabel' src={item.img} />
-                </View>
-                <Text>{item.name}</Text>
-              </Navigator>
-            ))}
+            {
+              NavList.map((item, index) => (
+                <Navigator className='flex-item' url={null} key={`Nav-${index}`}>
+                  <View>
+                    <Image mode='heightFix' className='centerLabel' src={item.img} />
+                  </View>
+                  <Text>{item.name}</Text>
+                </Navigator>
+              ))
+            }
           </View>
 
         </View>
@@ -83,35 +88,37 @@ export default class Index extends Component {
         {/* 乐客商家 */}
         <View className='LeKeStore'>
           <Text className='ListTitle'>乐客商家</Text>
-          {this.StoreList.map((item, index) => (
-            <Navigator key={index} className='flex-h' url={null}>
-              <View className='Img'>
-                <Image mode='widthFix' className='centerLabel' src={this.TestImg} />
-              </View>
-              <View className='flex-item'>
-                <View>
-                  <View className='Title'><View>湖品</View><Text className='Type1'>买</Text><Text className='Type2'>订</Text><Text className='Type3'>外</Text><Text className='Type4'>促</Text></View>
-                  <View className='Score'>
-                    <Image mode='widthFix' src='../../assets/img/icon6.png' />
-                    <Image mode='widthFix' src='../../assets/img/icon6.png' />
-                    <Image mode='widthFix' src='../../assets/img/icon6.png' />
-                    <Image mode='widthFix' src='../../assets/img/icon6.png' />
-                    <Image mode='widthFix' src='../../assets/img/icon6.png' />
-                    <Text>￥97/人</Text>
-                  </View>
-                  <View className='flex-h'>
-                    <View className='flex-item'>
-                      <View>
-                        <Text>淮扬菜</Text>
-                        <Text>徐庄软件园</Text>
+          {
+            StoreList.map((item, index) => (
+              <Navigator key={`Store-${index}`} className='flex-h' url={null}>
+                <View className='Img'>
+                  <Image mode='widthFix' className='centerLabel' src={this.TestImg} />
+                </View>
+                <View className='flex-item'>
+                  <View>
+                    <View className='Title'><View>湖品</View><Text className='Type1'>买</Text><Text className='Type2'>订</Text><Text className='Type3'>外</Text><Text className='Type4'>促</Text></View>
+                    <View className='Score'>
+                      <Image mode='widthFix' src={require('@/assets/img/icon6.png')} />
+                      <Image mode='widthFix' src={require('@/assets/img/icon6.png')} />
+                      <Image mode='widthFix' src={require('@/assets/img/icon6.png')} />
+                      <Image mode='widthFix' src={require('@/assets/img/icon6.png')} />
+                      <Image mode='widthFix' src={require('@/assets/img/icon6.png')} />
+                      <Text>￥97/人</Text>
+                    </View>
+                    <View className='flex-h'>
+                      <View className='flex-item'>
+                        <View>
+                          <Text>淮扬菜</Text>
+                          <Text>徐庄软件园</Text>
+                        </View>
                       </View>
+                      <Text>10.5km</Text>
                     </View>
-                    <Text>10.5km</Text>
                   </View>
                 </View>
-              </View>
-            </Navigator>
-          ))}
+              </Navigator>
+            ))
+          }
         </View>
 
       </View>