小程序：初始化项目

htmldev/wxMini/app.json

@@ -41,4 +41,4 @@
       }
     ]
   }
-}
+}

htmldev/wxMini/pages/home/home.js

@@ -4,7 +4,61 @@ Page({
    * 页面的初始数据
    */
   data: {
-    background: ['demo-text-1', 'demo-text-2', 'demo-text-3']
+    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
+    txtlist: [
+      '这是第一条公告内容',
+      '小程序上下滚动效果总结',
+      '这是一行上下滚动的文字，文字最好短点，超过一行省略'
+    ],
+    headerNav: [
+      {
+        icon: '',
+        name: '供应商',
+        path: ''
+      },
+      {
+        icon: '',
+        name: '采购指南',
+        path: ''
+      },
+      {
+        icon: '',
+        name: '收藏',
+        path: ''
+      },
+      {
+        icon: '',
+        name: '农事天地',
+        path: ''
+      }
+    ],
+    category: [
+      {
+        name: '全部',
+        id: '1'
+      },
+      {
+        name: '分类',
+        id: '2'
+      },
+      {
+        name: '分类',
+        id: '3'
+      },
+      {
+        name: '分类',
+        id: '4'
+      },
+      {
+        name: '分类',
+        id: '5'
+      },
+      {
+        name: '分类',
+        id: '6'
+      }
+    ],
+    currentCategory: ''
   },
 
   /**

htmldev/wxMini/pages/home/home.json

@@ -1,6 +1,12 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "van-tab": "@vant/weapp/tab/index",
+    "van-tabs": "@vant/weapp/tabs/index"
+  },
   "navigationBarTitleText": "始宁农业",
   "navigationBarBackgroundColor": "#CCCCCC",
-  "backgroundColor": "#F6F6F6"
+  "backgroundColor": "#F6F6F6",
+  "backgroundTextStyle": "dark",
+  "enablePullDownRefresh": true,
+  "onReachBottomDistance": 50
 }

htmldev/wxMini/pages/home/home.wxml

@@ -16,7 +16,8 @@
     </view>
   </view>
 
-  <view class="page-section page-section-spacing swiper">
+  <!-- 轮播 -->
+  <view class="page-section">
     <swiper
       indicator-dots="{{true}}"
       indicator-color="rgba(151, 209, 79, 1)"
@@ -31,4 +32,60 @@
       </block>
     </swiper>
   </view>
+  <!-- 消息通知 -->
+  <view class="news-section">
+    <image src=""></image>
+    <swiper
+      vertical="{{true}}"
+      interval="{{2000}}"
+      circular="{{true}}"
+      autoplay="{{true}}">
+      <block
+        wx:for="{{txtlist}}"
+        wx:key="*this">
+        <swiper-item>
+          <view class="swiper-item {{item}}">{{item}}</view>
+        </swiper-item>
+      </block>
+    </swiper>
+  </view>
+  <!--顶部导航-->
+  <view class="header-nav">
+    <view
+      class="nav"
+      wx:for="{{headerNav}}"
+      wx:key="index">
+      <image src=""></image>
+      <text>{{item.name}}</text>
+    </view>
+  </view>
+  <!-- 核心入口：最新上架、VR看菜园、频道：村长说农货 -->
+  <view class="marketing-wrap">
+    <view>
+      <image
+        class="new-goods"
+        src=""></image>
+      <image
+        class="vr"
+        src=""></image>
+    </view>
+    <image
+      class="media"
+      src=""></image>
+  </view>
+  <view class="excellent-goods-title">优秀产品</view>
+  <van-tabs
+    class="my-van-tabs"
+    active="{{ currentCategory }}"
+    color="transparent"
+    title-active-color="#FFFFFF"
+    title-inactive-color="#858597"
+    tab-class="my-tab-class"
+    tab-active-class="my-tab-active-class">
+    <van-tab
+      title="{{item.name}}"
+      wx:for="{{category}}"
+      wx:key="id">
+    </van-tab>
+  </van-tabs>
 </view>

htmldev/wxMini/pages/home/home.wxss

@@ -15,7 +15,7 @@
   width: 640rpx;
   height: 68rpx;
   border-radius: 40rpx;
-  background: #F6F7FAFF;
+  background: #F6F7FA;
 
 }
 
@@ -33,7 +33,7 @@
 .header-search-warp input {
   width: calc(100% - 66rpx);
   font-size: 28rpx;
-  color: #1F1F39FF;
+  color: #1F1F39;
 }
 
 .header-search-placeholder {
@@ -61,7 +61,7 @@
   min-width: 36rpx;
   min-height: 36rpx;
   border-radius: 18rpx;
-  background: #FA5151FF;
+  background: #FA5151;
   font-size: 24rpx;
   font-weight: 500;
   color: #FFF;
@@ -70,18 +70,168 @@
 }
 
 .page-section {
+  width: 100%;
+  margin: 22rpx auto 10rpx;
+}
+
+.page-section swiper {
   width: 690rpx;
   height: 270rpx;
-  margin: 22rpx auto 10rpx;
+  margin: 0 auto;
+  border-radius: 20rpx;
+  overflow: hidden;
 }
 
 .page-section swiper-item {
   background: pink;
-  border-radius: 20rpx;
 }
 
-.wx-swiper-dot {
+.page-section .wx-swiper-dot {
   width: 34px !important;
-  height: 6px;
+  height: 6px !important;
   border-radius: 0 !important;
 }
+
+.news-section {
+  display: flex;
+  align-items: center;
+  width: 690rpx;
+  padding: 0 16rpx;
+  height: 50rpx;
+  margin: 0 auto;
+  border-radius: 20rpx;
+  background: linear-gradient(90deg, rgba(255, 202, 138, 1) 0%, rgba(135, 222, 216, 1) 100%);
+}
+
+.news-section image {
+  width: 140rpx;
+  height: 42rpx;
+  background: pink;
+}
+
+.news-section swiper {
+  width: calc(100% - 140rpx);
+  height: 50rpx;
+  overflow: hidden;
+}
+
+.news-section .swiper-item {
+  display: block;
+  height: 100%;
+  line-height: 50rpx;
+  font-size: 20rpx;
+  color: #8C8C8C;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.header-nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 690rpx;
+  margin: 25rpx auto 0;
+}
+
+.header-nav .nav {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header-nav .nav image {
+  width: 70rpx;
+  height: 70rpx;
+  background: pink;
+}
+
+.header-nav .nav text {
+  margin-top: 12rpx;
+  font-size: 24rpx;
+  color: rgba(102, 102, 102, 1);
+}
+
+.marketing-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 690rpx;
+  margin: 0 auto;
+}
+
+.marketing-wrap view {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 20rpx 0;
+}
+
+.marketing-wrap .new-goods,
+.marketing-wrap .vr {
+  width: 339rpx;
+  height: 194rpx;
+  background: pink;
+}
+
+.marketing-wrap .media {
+  width: 100%;
+  height: 175rpx;
+  background: pink;
+}
+
+.excellent-goods-title {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  width: 690rpx;
+  padding-left: 40rpx;
+  margin: 46rpx auto;
+  line-height: 40rpx;
+  font-size: 36rpx;
+  font-weight: 500;
+  color: #1F1F39;
+}
+
+.excellent-goods-title:before {
+  content: '';
+  position: absolute;
+  left: 16rpx;
+  top: 1rpx;
+  width: 14rpx;
+  height: 37rpx;
+  border-radius: 40rpx;
+  background: #91B379;
+}
+
+.my-tab-class {
+  width: 140rpx;
+  height: 56rpx;
+  margin-left: 23rpx;
+  border-radius: 40rpx;
+  background: rgba(145, 179, 121, 0.1);
+}
+
+.my-tab-class[data-index="0"] {
+  margin-left: 30rpx;
+}
+
+.my-tab-class view {
+  line-height: 56rpx;
+  font-size: 28rpx;
+}
+
+.my-tab-active-class {
+  background: rgba(145, 179, 121, 1);
+}
+
+.van-tabs--line .van-tabs__wrap {
+  height: 56rpx !important;
+}
+
+.van-tabs__scroll--line {
+  height: 56rpx !important;
+}