Fri Aug 2 11:36:00 CST 2024 inscode

test/.eslintrc.js

+/*
+ * Eslint config file
+ * Documentation: https://eslint.org/docs/user-guide/configuring/
+ * Install the Eslint extension before using this feature.
+ */
+module.exports = {
+  env: {
+    es6: true,
+    browser: true,
+    node: true,
+  },
+  ecmaFeatures: {
+    modules: true,
+  },
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+  globals: {
+    wx: true,
+    App: true,
+    Page: true,
+    getCurrentPages: true,
+    getApp: true,
+    Component: true,
+    requirePlugin: true,
+    requireMiniProgram: true,
+  },
+  // extends: 'eslint:recommended',
+  rules: {},
+}

test/app.js

+// app.js
+App({
+  onLaunch() {
+    // 展示本地存储能力
+    const logs = wx.getStorageSync('logs') || []
+    logs.unshift(Date.now())
+    wx.setStorageSync('logs', logs)
+
+    // 登录
+    wx.login({
+      success: res => {
+        // 发送 res.code 到后台换取 openId, sessionKey, unionId
+      }
+    })
+  },
+  globalData: {
+    userInfo: null
+  }
+})

test/app.json

+{
+  "pages": [
+    "pages/test4/test4",
+    "pages/test3/test3",
+    "pages/test2/test2",
+    "pages/test1/test1",
+    "pages/test/test",
+    "pages/index/index",
+    "pages/logs/logs"
+  ],
+  "window": {
+    "navigationBarTextStyle": "black",
+    "navigationBarTitleText": "林涛测试用",
+    "navigationBarBackgroundColor": "#ffffff"
+  },
+  "style": "v2",
+  "componentFramework": "glass-easel",
+  "sitemapLocation": "sitemap.json",
+  "lazyCodeLoading": "requiredComponents"
+}

test/app.wxss

+/**app.wxss**/
+.container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  padding: 200rpx 0;
+  box-sizing: border-box;
+} 

test/pages/index/index.js

+// index.js
+const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
+
+Page({
+  data: {
+    motto: 'Hello World',
+    userInfo: {
+      avatarUrl: defaultAvatarUrl,
+      nickName: '',
+    },
+    hasUserInfo: false,
+    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
+    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
+  },
+  bindViewTap() {
+    wx.navigateTo({
+      url: '../logs/logs'
+    })
+  },
+  onChooseAvatar(e) {
+    const { avatarUrl } = e.detail
+    const { nickName } = this.data.userInfo
+    this.setData({
+      "userInfo.avatarUrl": avatarUrl,
+      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
+    })
+  },
+  onInputChange(e) {
+    const nickName = e.detail.value
+    const { avatarUrl } = this.data.userInfo
+    this.setData({
+      "userInfo.nickName": nickName,
+      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
+    })
+  },
+  getUserProfile(e) {
+    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+    wx.getUserProfile({
+      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
+      success: (res) => {
+        console.log(res)
+        this.setData({
+          userInfo: res.userInfo,
+          hasUserInfo: true
+        })
+      }
+    })
+  },
+})

test/pages/index/index.json

+{
+  "usingComponents": {
+  }
+}
\ No newline at end of file

test/pages/index/index.wxml

+<!--index.wxml-->
+<scroll-view class="scrollarea" scroll-y type="list">
+  <view class="container">
+    <view class="userinfo">
+      <block wx:if="{{canIUseNicknameComp && !hasUserInfo}}">
+        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+          <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
+        </button>
+        <view class="nickname-wrapper">
+          <text class="nickname-label">昵称</text>
+          <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
+        </view>
+      </block>
+      <block wx:elif="{{!hasUserInfo}}">
+        <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
+        <view wx:else> 请使用2.10.4及以上版本基础库 </view>
+      </block>
+      <block wx:else>
+        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
+        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+      </block>
+    </view>
+    <view class="usermotto">
+      <text class="user-motto">{{motto}}</text>
+    </view>
+  </view>
+</scroll-view>

test/pages/index/index.wxss

+/**index.wxss**/
+page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.scrollarea {
+  flex: 1;
+  overflow-y: hidden;
+}
+
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #aaa;
+  width: 80%;
+}
+
+.userinfo-avatar {
+  overflow: hidden;
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+
+.usermotto {
+  margin-top: 200px;
+}
+
+.avatar-wrapper {
+  padding: 0;
+  width: 56px !important;
+  border-radius: 8px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.avatar {
+  display: block;
+  width: 56px;
+  height: 56px;
+}
+
+.nickname-wrapper {
+  display: flex;
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  border-top: .5px solid rgba(0, 0, 0, 0.1);
+  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
+  color: black;
+}
+
+.nickname-label {
+  width: 105px;
+}
+
+.nickname-input {
+  flex: 1;
+}

test/pages/logs/logs.js

+// logs.js
+const util = require('../../utils/util.js')
+
+Page({
+  data: {
+    logs: []
+  },
+  onLoad() {
+    this.setData({
+      logs: (wx.getStorageSync('logs') || []).map(log => {
+        return {
+          date: util.formatTime(new Date(log)),
+          timeStamp: log
+        }
+      })
+    })
+  }
+})

test/pages/logs/logs.json

+{
+  "usingComponents": {
+  }
+}
\ No newline at end of file

test/pages/logs/logs.wxml

+<!--logs.wxml-->
+<scroll-view class="scrollarea" scroll-y type="list">
+  <block wx:for="{{logs}}" wx:key="timeStamp" wx:for-item="log">
+    <view class="log-item">{{index + 1}}. {{log.date}}</view>
+  </block>
+</scroll-view>

test/pages/logs/logs.wxss

+page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.scrollarea {
+  flex: 1;
+  overflow-y: hidden;
+}
+.log-item {
+  margin-top: 20rpx;
+  text-align: center;
+}
+.log-item:last-child {
+  padding-bottom: env(safe-area-inset-bottom);
+}

test/pages/test/test.js

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

test/pages/test/test.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

test/pages/test/test.less

+.outer {
+	/* 设置元素宽度为 300rpx */
+	width: 300rpx;
+	/* 设置元素高度为 200rpx */
+	height: 200rpx;
+	/* 设置元素背景色为淡灰色（#eee）*/
+	background-color: #eee;
+	/* 设置元素为 flex 布局 */
+	display: flex;
+	/* 在水平方向上居中元素 */
+	justify-content: center;
+	/* 在垂直方向上居中元素 */
+	align-items: center;
+}
+
+.middle {
+  width: 200rpx;
+  height: 150rpx;
+  background-color: #999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.inner {
+  width: 100rpx;
+  height: 100rpx;
+  background-color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: white;
+}

test/pages/test/test.ts

+Page({
+  data: {
+    output: "",
+    scanResult:'请扫码'
+  },
+
+  scanCode: function() {  
+    var that = this; // 保存 this 的引用  
+    wx.scanCode({  
+      success: function(res) {  
+        console.log(res.result);  
+        that.setData({ // 使用 that 而不是 this  
+          scanResult: res.result  
+        });  
+      },  
+      fail: function(err) {  
+        console.error(err);  
+      }  
+    });  
+  },
+
+  handleConfirm: function (event) {
+    console.log('handleConfirm');
+    this.setData({ output: event.detail.value });
+  },
+
+  handleBlur: function (event) {
+    this.setData({ output: event.detail.value });
+  },
+
+  handleOuterTap: function () {
+    console.log('外圈');
+  },
+  handleMiddleTap: function () {
+    console.log('中圈');
+  },
+  handleInnerTap: function () {
+    console.log('内圈');
+  },
+})

test/pages/test/test.wxml

+<view class="outer" catchtap="handleOuterTap">
+  外圈
+  <view class="middle" catchtap="handleMiddleTap">
+    中圈
+    <view class="inner" bindtap="handleInnerTap">
+      内圈
+    </view>
+  </view>
+</view>
+
+<view class="container">
+  <input class="input" placeholder="请输入内容" bindblur="handleConfirm" />
+  <view class="output">输出：{{output}}</view>
+</view>
+
+<view>
+  <button bindtap="scanCode">扫描二维码</button>
+  <text>二维码：{{scanResult}}</text>
+</view>
+
+
+

test/pages/test/test.wxss

+/* pages/test/test.wxss */

test/pages/test1/test1.js

+// pages/test1/test1.js
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    numList:[1,2,3]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+    console.log('监听用户下拉刷新')
+    this.setData({
+      numList: [1,2,3]
+    })
+        // 下拉刷新以后，loading效果有可能不会回弹回去
+        if (this.data.numList.length === 3){
+          wx.stopPullDownRefresh()
+        }
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+    console.log('监听用户上拉加载')
+    // 增加一个提示框
+    wx.showLoading({
+      title: '数据加载中...',
+    })
+      // 设定一个定时器。在定时到期以后执行注册的回调函数
+    setTimeout(() => {
+      // 获取数组的最后一项
+      const lastNum = this.data.numList[this.data.numList.length-1]
+      // 需要追加的元素
+      const newArr = [lastNum + 1,lastNum + 2,lastNum +3]
+ 
+      // 合并初始数组以及追加后的数组
+      // 例如初始数组[1,2,3]
+      // 追加后[1,2,3,4,5,6] 
+      this.setData({
+        numList: [...this.data.numList,...newArr]
+      })
+ 
+      // 隐藏 loading 提示框
+      wx.hideLoading()
+      // 通过更改数字进行更改延时
+    },100
+    )
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
\ No newline at end of file

test/pages/test1/test1.json

+{
+  "usingComponents": {},
+  "onReachBottomDistance":220,
+  "enablePullDownRefresh": true,
+  "backgroundColor": "#efefef",
+  "backgroundTextStyle":"dark"
+}
\ No newline at end of file

test/pages/test1/test1.wxml

+<!--pages/test1/test1.wxml-->
+<text>pages/test1/test1.wxml</text>
+<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
\ No newline at end of file

test/pages/test1/test1.wxss

+/* pages/test1/test1.wxss */
+page{
+  height: 1000px;
+}
+
+view{
+  height: 200rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+ 
+view:nth-child(odd){
+  background-color: lightskyblue;
+}
+ 
+view:nth-child(even){
+  background-color: rgb(201, 210, 216);
+}
+
+view:last-child {
+  background-color: rgb(240, 226, 181);
+}
+
+view:first-child {
+  background-color: rgb(240, 226, 181);
+}

test/pages/test2/test2.js

+// pages/test2/test2.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {  
+    imageUrls: [  
+      '/images/icon_API.png',  
+      '/images/icon_API.png',  
+      '/images/icon_API.png'  
+    ]  
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
\ No newline at end of file

test/pages/test2/test2.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

test/pages/test2/test2.wxml

+<!--pages/test2/test2.wxml-->
+<scroll-view class="scroll-x" scroll-x>
+  <view>
+    1
+  </view>
+  <view>
+    2
+  </view>
+  <view>
+    3
+  </view>
+</scroll-view>
+
+<scroll-view class="scroll-y" scroll-y>
+  <view>1</view>
+  <view>2</view>
+  <view>3</view>
+</scroll-view>
+
+<!-- WXML 文件 -->  
+<scroll-view class="scroll-view-horizontal" scroll-x="true">  
+  <view class="image-container" wx:for="{{imageUrls}}" wx:key="index">  
+    <image class="scroll-image" src="{{item}}" mode="widthFix" />  
+  </view>  
+</scroll-view>
\ No newline at end of file

test/pages/test2/test2.wxss

+.scroll-x {
+  width: 100%;
+  white-space: nowrap;
+  background-color: skyblue;
+}
+
+.scroll-x view {
+  display: inline-block;
+  width: 300rpx;
+  height: 300rpx;
+}
+
+.scroll-x view:last-child {
+  background-color: lightcoral;
+}
+
+.scroll-x view:first-child {
+  background-color: lightseagreen;
+}
+
+.scroll-y {
+  height: 300rpx;
+  background-color: skyblue;
+  margin-top: 10rpx;
+}
+
+.scroll-y view {
+  height: 100rpx;
+}
+
+.scroll-y view:last-child {
+  background-color: lightcoral;
+}
+
+.scroll-y view:first-child {
+  background-color: lightseagreen;
+}
+
+/* WXSS 文件 */  
+.good-item {  
+  width: 100%; /* 或者使用具体宽度，如 300rpx */  
+  height: 200rpx; /* 根据需要设定 */  
+  display: inline-block;
+  justify-content: center;  
+  align-items: center;  
+  overflow: hidden;  
+  border: 1rpx solid #ccc; /* 可选，为了更清楚地看到边界 */  
+}  
+  
+/* 你可以在这里设置image的样式，但mode已在HTML中指定 */
+
+.scroll-z {
+  width: 100%;
+  white-space: nowrap;
+  background-color: skyblue;
+}
+
+/* WXSS 文件 */  
+.scroll-view-horizontal {  
+  white-space: nowrap; /* 保持子元素在一行显示 */  
+  display: flex; /* 使用flex布局 */  
+  overflow-x: auto; /* 允许横向滚动 */  
+  /* 可选：设置固定高度 */  
+  height: 150px; /* 根据你的需求调整 */  
+}  
+  
+.image-container {  
+  display: inline-block; /* 使图片容器横向排列 */  
+  /* 可选：设置图片之间的间距 */  
+  margin-right: 10px;  
+}  
+  
+.scroll-image {  
+  /* 根据需要设置图片的样式，如宽度、高度等 */  
+  /* mode="widthFix" 时，只需要设置宽度或高度其中一个即可 */  
+  width: 100%; /* 宽度占满容器，但高度会根据图片宽高比自动调整 */  
+  /* 如果你希望图片有固定的高度，可以取消 width: 100%; 并设置固定的高度，但注意这样会改变图片的宽高比 */  
+  /* height: 100px; */  
+}  
+  
+/* 注意：由于使用了 mode="widthFix"，图片的高度会根据宽度自动调整以保持宽高比，  
+   因此你通常只需要设置图片的宽度或者容器的宽度，高度会自动计算。 */

test/pages/test3/test3.js

+// pages/test3/test3.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {  
+    imageUrls: [  
+      '/images/banner1.jpg',  
+      '/images/icon_API.png',  
+      '/images/banner1.jpg', 
+      '/images/icon_API.png',  
+      '/images/banner1.jpg', 
+      '/images/icon_component_HL.png'  
+    ]  
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad(options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {
+
+  }
+})
\ No newline at end of file

test/pages/test3/test3.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

test/pages/test3/test3.wxml

+<!--pages/test3/test3.wxml-->
+<text>pages/test3/test3.wxml</text>
+<!-- WXML 文件 -->  
+<scroll-view class="scroll-view-horizontal" scroll-x="true">  
+  <view class="image-container" wx:for="{{imageUrls}}" wx:key="index">  
+    <image class="scroll-image" src="{{item}}" mode="scaleToFill" />  
+  </view>  
+</scroll-view>
\ No newline at end of file

test/pages/test3/test3.wxss

+/* pages/test3/test3.wxss */
+
+/* WXSS 文件 */  
+.scroll-view-horizontal {  
+  white-space: nowrap; /* 保持子元素在一行显示 */  
+  display: flex; /* 使用flex布局 */  
+  overflow-x: auto; /* 允许横向滚动 */  
+  /* 可选：设置固定高度 */  
+  height: 250px; /* 根据你的需求调整 */  
+}  
+  
+.image-container {  
+  display: inline-block; /* 使图片容器横向排列 */  
+  /* 可选：设置图片之间的间距 */  
+  margin-right: 10px;  
+  height: 150; /* 根据你的需求调整 */  
+}  
+  
+.scroll-image {  
+  /* 根据需要设置图片的样式，如宽度、高度等 */  
+  /* mode="widthFix" 时，只需要设置宽度或高度其中一个即可 */  
+  width: 100px; /* 宽度占满容器，但高度会根据图片宽高比自动调整 */  
+  height: 100px;
+  /* 如果你希望图片有固定的高度，可以取消 width: 100%; 并设置固定的高度，但注意这样会改变图片的宽高比 */  
+  /* height: 100px; */  
+}  
+  
+/* 注意：由于使用了 mode="widthFix"，图片的高度会根据宽度自动调整以保持宽高比，  
+   因此你通常只需要设置图片的宽度或者容器的宽度，高度会自动计算。 */

test/pages/test4/test4.js

+// pages/test/test.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    navId: 0, //导航栏id
+    windowHeight: '', //屏幕的高度
+    currentId: 0 //swiper下标
+  },
+  topSwiper(event) {
+    let navId = event.detail.current; //获取swiper下标
+    console.log('topSwiper navId:'+event.detail.current)
+    this.setData({
+      navId
+    })
+  },
+  //导航栏
+  changNav(event) {
+    let navId = event.currentTarget.dataset.id; //获取导航栏下标
+    let windowHeight = this.data.windowHeight; //
+    console.log('changNav windowHeight:'+windowHeight)
+    if (this.data.currentId == navId) {
+      return false;
+    } else {
+      this.setData({
+        currentId: navId
+      })
+    }
+    this.setData({
+      navId,
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    //获取屏幕高度
+    let that = this;
+    wx.getSystemInfo({
+      success: function (res) {
+        let clientHeight = res.windowHeight,
+          clientWidth = res.windowWidth,
+          rpxR = 750 / clientWidth;
+        let calc = clientHeight * rpxR;
+        console.log('calc:'+calc);
+        console.log('rpxR:'+rpxR);
+        that.setData({
+          windowHeight: calc,
+        });
+      }
+    });
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

test/pages/test4/test4.json

+{
+  "usingComponents": {}
+}
\ No newline at end of file

test/pages/test4/test4.wxml

+<!--pages/test4/test4.wxml-->
+<text>pages/test4/test4.wxml</text>
+<!-- 导航 -->
+<scroll-view scroll-x enable-flex scroll-with-animation class="navScroll">
+  <view id="{{'scroll'+ item.id}}" class="navItem">
+    <view class="navContent {{navId == 0?'active':'' }}" bindtap="changNav" data-id="0">
+      品牌介绍
+    </view>
+  </view>
+  <view id="{{'scroll'+ item.id}}" class="navItem">
+    <view class="navContent {{navId == 1?'active':'' }}" bindtap="changNav" data-id="1">
+      专利认证
+    </view>
+  </view>
+  <view id="{{'scroll'+ item.id}}" class="navItem">
+    <view class="navContent {{navId == 2?'active':'' }}" bindtap="changNav" data-id="2">
+      售后保险
+    </view>
+  </view>
+  <view id="{{'scroll'+ item.id}}" class="navItem">
+    <view class="navContent {{navId == 3?'active':'' }}" bindtap="changNav" data-id="3">
+      加入我们
+    </view>
+  </view>
+</scroll-view>
+
+<swiper class="top_swiper" circular bindchange="topSwiper" current="{{currentId}}" style="height: {{windowHeight}}rpx;line-height: {{windowHeight}}rpx;">
+  <swiper-item duration="{{duration}}">
+    <view class="swiperItem" style="background-color: red;">AAAA</view>
+  </swiper-item>
+  <swiper-item duration="{{duration}}">
+    <view class="swiperItem" style="background-color: rgb(67, 110, 129);">BBBB</view>
+  </swiper-item>
+  <swiper-item duration="{{duration}}">
+    <view class="swiperItem" style="background-color: blue;">CCCC</view>
+  </swiper-item>
+  <swiper-item duration="{{duration}}">
+    <view class="swiperItem" style="background-color: orange;">DDDD</view>
+  </swiper-item>
+</swiper>

test/pages/test4/test4.wxss

+/* pages/test4/test4.wxss */
+.navScroll {
+  display: flex;
+  white-space: nowrap;
+  height: 80rpx;
+  background-color: rgba(83, 83, 83, 100);
+  position: fixed;
+  top: 0;
+  z-index: 100;
+}
+
+.navScroll .navItem {
+  width: calc(100%/4);
+  font-size: 20rpx;
+  border: 0rpx solid red;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.navScroll .navItem .active {
+  background-color: rgba(238, 205, 141, 100);
+  color: rgba(255, 255, 255, 100);
+}
+
+.navScroll .navContent {
+  width: 60%;
+  height: 48rpx;
+  line-height: 48rpx;
+  border-radius: 24rpx;
+  border: 0rpx solid red;
+  text-align: center;
+  color: rgba(238, 205, 141, 100);
+}
+
+.top_swiper{
+  width: 100%;
+  text-align: center;
+  color:#FFF;
+  
+}
+
+.swiperItem{
+  width: 100%;
+  height: 100%;
+}

test/project.config.json

+{
+  "compileType": "miniprogram",
+  "libVersion": "trial",
+  "packOptions": {
+    "ignore": [],
+    "include": []
+  },
+  "setting": {
+    "coverView": true,
+    "es6": true,
+    "postcss": true,
+    "minified": true,
+    "enhance": true,
+    "showShadowRootInWxmlPanel": true,
+    "packNpmRelationList": [],
+    "babelSetting": {
+      "ignore": [],
+      "disablePlugins": [],
+      "outputPath": ""
+    }
+  },
+  "condition": {},
+  "editorSetting": {
+    "tabIndent": "auto",
+    "tabSize": 2
+  },
+  "appid": "wxf74b9d8d1f5a59dc"
+}
\ No newline at end of file

test/project.private.config.json

+{
+  "description": "项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。详见文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html",
+  "projectname": "test",
+  "setting": {
+    "compileHotReLoad": true
+  }
+}
\ No newline at end of file

test/sitemap.json

+{
+  "desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
+  "rules": [{
+  "action": "allow",
+  "page": "*"
+  }]
+}
\ No newline at end of file

test/utils/util.js

+const formatTime = date => {
+  const year = date.getFullYear()
+  const month = date.getMonth() + 1
+  const day = date.getDate()
+  const hour = date.getHours()
+  const minute = date.getMinutes()
+  const second = date.getSeconds()
+
+  return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
+}
+
+const formatNumber = n => {
+  n = n.toString()
+  return n[1] ? n : `0${n}`
+}
+
+module.exports = {
+  formatTime
+}