小程序：样式

htmldev/wxMini/README.md

@@ -3,7 +3,7 @@
 - [x] 首页 home 12
   - [x] 用户消息 leavingAMessage 4
   - [x] 供应商 business 4
-    - 供应商详情 businessDetail 4
+    - [x] 供应商详情 businessDetail 4
   - 采购指南 guide 6
   - 收藏 collection 4
   - 最新上架 newGoods 4

htmldev/wxMini/app.json

@@ -8,7 +8,8 @@
     "pages/guide/guide",
     "pages/collection/collection",
     "pages/news/news",
-    "pages/businessDetail/businessDetail"
+    "pages/businessDetail/businessDetail",
+    "pages/shoppingCar/shoppingCar"
   ],
   "permission": {
     "scope.userLocation": {

htmldev/wxMini/app.wxss

@@ -81,33 +81,91 @@ view.footer-fixed-bottom button[type='default'] {
   justify-content: center;
 }
 
-.page-header-search-warp {
+.app_page-header-search-warp {
   display: flex;
   align-items: center;
   width: 640rpx;
   height: 68rpx;
   border-radius: 40rpx;
   background: #F6F7FA;
-
 }
 
-.page-header-search-warp label {
+.app_page-header-search-warp label {
   width: 66rpx;
 }
 
-.page-header-search-warp image {
+.app_page-header-search-warp image {
   display: block;
   width: 29rpx;
   height: 29rpx;
   background: pink;
 }
 
-.page-header-search-warp input {
+.app_page-header-search-warp input {
   width: calc(100% - 66rpx);
   font-size: 28rpx;
   color: #1F1F39;
 }
 
-.header-search-placeholder {
+.app_header-search-placeholder {
   color: rgba(190, 192, 202, 1);
 }
+
+.app_nav-wrap {
+  width: 100%;
+  padding-left: 22rpx;
+  border-bottom: 1rpx solid rgba(189, 189, 189, 1);
+  white-space: nowrap;
+}
+
+.app_nav-wrap .nav {
+  position: relative;
+  left: 0;
+  bottom: 0;
+  display: inline-block;
+  padding: 0 22rpx 24rpx;
+  font-size: 0;
+  color: rgba(145, 179, 121, 1);
+  text-align: center;
+}
+
+.app_nav-wrap .nav.active {
+  color: rgba(51, 51, 51, 1);
+}
+
+.app_nav-wrap .nav.active .photo {
+  border: 4rpx solid rgba(145, 179, 121, 1);
+}
+
+.app_nav-wrap .nav.active:after {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  content: '';
+  width: 100%;
+  height: 12rpx;
+  border-radius: 10rpx 10rpx 0 0;
+  background: rgba(145, 179, 121, 1);
+  transform: translateX(-50%);
+}
+
+.app_nav-wrap .photo {
+  width: 106rpx;
+  height: 106rpx;
+  border-radius: 30rpx;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.app_nav-wrap .photo image {
+  display: block;
+  width: 100%;
+  height: 100%;
+  background-color: pink;
+}
+
+.app_nav-wrap .name {
+  margin-top: 16rpx;
+  font-size: 24rpx;
+  line-height: 36rpx;
+}

htmldev/wxMini/pages/business/business.wxml

@@ -1,12 +1,12 @@
 <view class="page-header-search">
-  <view class="page-header-search-warp">
+  <view class="app_page-header-search-warp">
     <label for="header-search">
       <image src=""></image>
     </label>
-    <input placeholder-class="header-search-placeholder" value="" placeholder="搜索信息"></input>
+    <input placeholder-class="app_header-search-placeholder" value="" placeholder="搜索信息"></input>
   </view>
 </view>
-<scroll-view class="nav-wrap" scroll-x="{{true}}">
+<scroll-view class="app_nav-wrap" scroll-x="{{true}}">
   <view class="nav {{currentCategory === item.id ? 'active' : ''}}" wx:for="{{category}}" wx:key="id">
     <view class="photo">
       <image src=""></image>

htmldev/wxMini/pages/business/business.wxss

@@ -2,69 +2,10 @@
   padding: 20rpx 0 28rpx;
 }
 
-.page-header-search-warp {
+.app_page-header-search-warp {
   width: 690rpx;
 }
 
-.nav-wrap {
-  width: 100%;
-  padding-left: 22rpx;
-  border-bottom: 1rpx solid rgba(189, 189, 189, 1);
-  white-space: nowrap;
-}
-
-.nav-wrap .nav {
-  position: relative;
-  left: 0;
-  bottom: 0;
-  display: inline-block;
-  padding: 0 22rpx 24rpx;
-  font-size: 0;
-  color: rgba(145, 179, 121, 1);
-  text-align: center;
-}
-
-.nav-wrap .nav.active {
-  color: rgba(51, 51, 51, 1);
-}
-
-.nav-wrap .nav.active .photo {
-  border: 4rpx solid rgba(145, 179, 121, 1);
-}
-
-.nav-wrap .nav.active:after {
-  position: absolute;
-  left: 50%;
-  bottom: 0;
-  content: '';
-  width: 100%;
-  height: 12rpx;
-  border-radius: 10rpx 10rpx 0 0;
-  background: rgba(145, 179, 121, 1);
-  transform: translateX(-50%);
-}
-
-.nav-wrap .photo {
-  width: 106rpx;
-  height: 106rpx;
-  border-radius: 30rpx;
-  margin: 0 auto;
-  overflow: hidden;
-}
-
-.nav-wrap .photo image {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background-color: pink;
-}
-
-.nav-wrap .name {
-  margin-top: 16rpx;
-  font-size: 24rpx;
-  line-height: 36rpx;
-}
-
 .list {
   padding: 38rpx 0;
 }

htmldev/wxMini/pages/guide/guide.js

@@ -3,7 +3,43 @@ Page({
   /**
    * 页面的初始数据
    */
-  data: {},
+  data: {
+    category: [
+      {
+        name: '全部',
+        id: '1'
+      },
+      {
+        name: '分类',
+        id: '2'
+      },
+      {
+        name: '分类',
+        id: '3'
+      },
+      {
+        name: '分类',
+        id: '4'
+      },
+      {
+        name: '分类',
+        id: '5'
+      },
+      {
+        name: '分类',
+        id: '6'
+      }
+    ],
+    currentCategory: '1',
+    pagenum: 0,
+    pagesize: 20,
+    finished: false, // 所有数据是否加载完
+    isRefresh: false, // 是否下拉刷新
+    isFetchLock: false, // 接口调用加锁
+    list: [1],
+    booLock: false
+  },
+  freshing: false,
 
   /**
    * 生命周期函数--监听页面加载
@@ -59,5 +95,10 @@ Page({
    */
   onShareAppMessage() {
 
+  },
+  jumpShoppingCar() {
+    wx.navigateTo({
+      url: '/pages/shoppingCar/shoppingCar'
+    })
   }
 })

htmldev/wxMini/pages/guide/guide.json

@@ -1,3 +1,6 @@
 {
-  "usingComponents": {}
-}
+  "usingComponents": {},
+  "backgroundTextStyle": "dark",
+  "enablePullDownRefresh": true,
+  "onReachBottomDistance": 50
+}

htmldev/wxMini/pages/guide/guide.wxml

@@ -0,0 +1,21 @@
+<view class="wrapper">
+  <view class="page-header-search">
+    <view class="app_page-header-search-warp">
+      <label for="header-search">
+        <image src=""></image>
+      </label>
+      <input placeholder-class="app_header-search-placeholder" value="" placeholder="搜索"></input>
+    </view>
+    <view class="shopping-car" bind:tap="jumpShoppingCar">
+      <image src=""></image>
+    </view>
+  </view>
+  <scroll-view class="app_nav-wrap" scroll-x="{{true}}">
+    <view class="nav {{currentCategory === item.id ? 'active' : ''}}" wx:for="{{category}}" wx:key="id">
+      <view class="photo">
+        <image src=""></image>
+      </view>
+      <view class="name">{{item.name}}</view>
+    </view>
+  </scroll-view>
+</view>

htmldev/wxMini/pages/guide/guide.wxss

@@ -0,0 +1,12 @@
+.shopping-car {
+  position: relative;
+  left: 0;
+  top: 0;
+}
+
+.shopping-car image {
+  display: block;
+  width: 40rpx;
+  height: 50rpx;
+  background: pink;
+}

htmldev/wxMini/pages/home/home.wxml

@@ -1,10 +1,10 @@
 <view class="home-wrapper">
   <view class="page-header-search">
-    <view class="page-header-search-warp">
+    <view class="app_page-header-search-warp">
       <label for="header-search">
         <image src=""></image>
       </label>
-      <input placeholder-class="header-search-placeholder" value="" placeholder="搜索"></input>
+      <input placeholder-class="app_header-search-placeholder" value="" placeholder="搜索"></input>
     </view>
     <view class="leaving-a-message" bind:tap="jumpLeavingAMessage">
       <image src=""></image>
@@ -64,4 +64,4 @@
       <goods-item />
     </view>
   </view>
-</view>
+</view>

htmldev/wxMini/pages/leavingAMessage/leavingAMessage.wxml

@@ -1,11 +1,11 @@
 <view class="wrapper">
   <view class="page-header-search">
-    <view class="page-header-search-warp">
+    <view class="app_page-header-search-warp">
       <label for="header-search">
         <image src=""></image>
       </label>
       <input
-        placeholder-class="header-search-placeholder"
+        placeholder-class="app_header-search-placeholder"
         value=""
         placeholder="搜索信息"></input>
     </view>

htmldev/wxMini/pages/leavingAMessage/leavingAMessage.wxss

@@ -8,7 +8,7 @@ page {
   padding-bottom: 152rpx;
 }
 
-.page-header-search-warp {
+.app_page-header-search-warp {
   width: 690rpx;
 }
 

htmldev/wxMini/pages/shoppingCar/shoppingCar.js

@@ -0,0 +1,63 @@
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {},
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})

htmldev/wxMini/pages/shoppingCar/shoppingCar.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

htmldev/wxMini/project.private.config.json

@@ -8,7 +8,7 @@
       "list": [
         {
           "name": "111",
-          "pathName": "pages/business/business",
+          "pathName": "pages/guide/guide",
           "query": "",
           "launchMode": "default",
           "scene": null