更新

app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/test/index",
     "pages/my/index",
     "pages/home/index",
     "pages/bank/index",

pages/my/index.js

@@ -1,5 +1,6 @@
 // pages/my/index.js
 const app = getApp()
+import Dialog from '../../miniprogram_npm/vant-weapp/dialog/dialog';
 Page({
   /**
    * 页面的初始数据
@@ -14,21 +15,66 @@ Page({
     // },
     active: 4,
     ColorList: app.globalData.ColorList,
-    searchValue:'', 
+    searchValue: '',
+    show: false,
+    option1: [{
+        text: '全部商品',
+        value: 0
+      },
+      {
+        text: '新款商品',
+        value: 1
+      },
+      {
+        text: '活动商品',
+        value: 2
+      },
+    ],
+    option2: [{
+        text: '默认排序',
+        value: 'a'
+      },
+      {
+        text: '好评排序',
+        value: 'b'
+      },
+      {
+        text: '销量排序',
+        value: 'c'
+      },
+    ],
+    value1: 0,
+    value2: 'a',
   },
-  changeSearch(){
+  changeSearch() {
     console.log(this.data.searchValue);
   },
-  onChange(e){
+  onChange(e) {
     this.setData({
       searchValue: e.detail,
     });
   },
+  //点击弹出层
+  clickPop() {
+    Dialog.confirm({
+      title: '标题',
+      message: '弹窗内容',
+    }).then(() => {
+      // on close
+    });
+    // this.setData({
+    //   show: true,
+    // });
+  },
+  onClose() {
+    this.setData({
+      show: false,
+    });
+  },
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
-  },
+  onLoad: function (options) {},
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -61,7 +107,14 @@ Page({
    * 页面相关事件处理函数--监听用户下拉动作
    */
   onPullDownRefresh: function () {
-
+    wx.showNavigationBarLoading() //在标题栏中显示加载
+    wx.showLoading({
+      title: '正在刷新数据',
+    })
+    setTimeout(function () {
+      wx.hideLoading();
+    }, 2000);
+    wx.stopPullDownRefresh();
   },
 
   /**

pages/my/index.json

@@ -1,5 +1,7 @@
 {
   "usingComponents": {
     "cu-custom": "/components/cu-custom/cu-custom"
-  }
+  },
+  "onReachBottomDistance": 50,
+  "enablePullDownRefresh": true
 }

pages/my/index.wxml

@@ -2,14 +2,15 @@
   <view slot="backText">返回</view>
   <view slot="content">背景颜色</view>
 </cu-custom> -->
+<van-dialog id="van-dialog" />
 <cu-custom bgColor="bg-white" isNotice="{{true}}">
 	<view slot="content">
 		操作条
 	</view>
 </cu-custom>
 <view class="bigcontainer">
-	<van-search value="{{ searchValue }}"  bind:change="onChange"  use-action-slot  shape="round" background="#4fc08d" placeholder="请输入搜索关键词" >
-		  <view slot="action" bind:tap="changeSearch">搜索</view>
+	<van-search value="{{ searchValue }}" bind:change="onChange" use-action-slot shape="round" background="#4fc08d" placeholder="请输入搜索关键词">
+		<view slot="action" bind:tap="changeSearch">搜索</view>
 	</van-search>
 	<view class="content0">
 		<view>aa</view>
@@ -19,4 +20,26 @@
 		<view class="left">撒旦撒旦撒</view>
 		<view class="left">反反复复</view>
 	</view>
+	<view>
+		<van-button type="info" bind:click="clickPop">弹出层</van-button>
+		<van-popup show="{{ show }}" duration="500" position="right" custom-style="height: 100%;width:100%" bind:close="onClose">
+			<view>
+				<view>1</view>
+				<view>2</view>
+				<view>3</view>
+				<view>4</view>
+				<view>5</view>
+				<view>6</view>
+				<view>7</view>
+				<view>bb</view>
+				<van-button type="danger" bind:click="onClose">关闭</van-button>
+			</view>
+		</van-popup>
+	</view>
+	<view >
+		<van-dropdown-menu>
+			<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+			<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
+		</van-dropdown-menu>
+	</view>
 </view>

pages/test/index.js

@@ -0,0 +1,148 @@
+// pages/my/index.js
+const app = getApp()
+import Dialog from '../../miniprogram_npm/vant-weapp/dialog/dialog';
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    // nvabarData: {
+    //   showCapsule: 0, //是否显示左上角图标，消息中心   1表示显示    0表示不显示
+    //   showBack: 1, //返回
+    //   title: '我的', //导航栏 中间的标题
+    //   // 此页面 页面内容距最顶部的距离
+    //   height: app.globalData.height * 2 + 20,
+    // },
+    active: 4,
+    CustomBar: app.globalData.CustomBar,  // 注意 这是侧边抽底计算的适配距离  basis-xl 左测弹出的宽度
+    ColorList: app.globalData.ColorList,
+    searchValue: '',
+    show: false,
+    option1: [{
+        text: '全部商品',
+        value: 0
+      },
+      {
+        text: '新款商品',
+        value: 1
+      },
+      {
+        text: '活动商品',
+        value: 2
+      },
+    ],
+    option2: [{
+        text: '默认排序',
+        value: 'a'
+      },
+      {
+        text: '好评排序',
+        value: 'b'
+      },
+      {
+        text: '销量排序',
+        value: 'c'
+      },
+    ],
+    value1: 0,
+    value2: 'a',
+    modalName:null,
+  },
+  changeSearch() {
+    console.log(this.data.searchValue);
+  },
+  onChange(e) {
+    this.setData({
+      searchValue: e.detail,
+    });
+  },
+  //点击弹出层
+  clickPop() {
+    this.setData({
+      show: true,
+    });
+  },
+  onClose() {
+    this.setData({
+      show: false,
+    });
+  },
+  clickdialog(){
+    Dialog.confirm({
+      title: '标题',
+      message: '弹窗内容',
+    }).then(() => {
+      // on close
+    });
+  },
+  showModal(e) {
+    console.log(e)
+    this.setData({
+      modalName: e.currentTarget.dataset.target
+    })
+  },
+  hideModal(e) {
+    this.setData({
+      modalName: null
+    })
+  },
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {},
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+    wx.showNavigationBarLoading() //在标题栏中显示加载
+    wx.showLoading({
+      title: '正在刷新数据',
+    })
+    setTimeout(function () {
+      wx.hideLoading();
+    }, 2000);
+    wx.stopPullDownRefresh();
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/test/index.json

@@ -0,0 +1,7 @@
+{
+  "usingComponents": {
+    "cu-custom": "/components/cu-custom/cu-custom"
+  },
+  "onReachBottomDistance": 50,
+  "enablePullDownRefresh": true
+}

pages/test/index.wxml

@@ -0,0 +1,48 @@
+<!-- <cu-custom bgColor="bg-gradual-blue" isBack="{{true}}">
+  <view slot="backText">返回</view>
+  <view slot="content">背景颜色</view>
+</cu-custom> -->
+<van-dialog id="van-dialog" />
+<cu-custom bgColor="bg-white" isNotice="{{true}}">
+	<view slot="content">
+		操作条
+	</view>
+</cu-custom>
+<view class="bigcontainer">
+	<van-search value="{{ searchValue }}" bind:change="onChange" use-action-slot shape="round" background="#4fc08d" placeholder="请输入搜索关键词">
+		<view slot="action" bind:tap="changeSearch">搜索</view>
+	</van-search>
+	<view class="content0">
+		<view>aa</view>
+		<view>aa</view>
+	</view>
+	<view class="content1">
+		<view class="left">撒旦撒旦撒</view>
+		<view class="left">反反复复</view>
+	</view>
+	<view>
+	 <button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DrawerModalR">右边</button>
+	</view>
+	<!-- 侧边抽屉 -->
+	<view class="cu-modal drawer-modal justify-end {{modalName=='DrawerModalR'?'show':''}}" bindtap="hideModal">
+		<view class="cu-dialog basis-xl" catchtap style="top:{{CustomBar}}px;height:calc(100vh - {{CustomBar}}px)">
+			<view class="cu-list menu text-left">
+				<view class="cu-item arrow" wx:for="{{5}}" wx:key="index">
+					<view class="content">
+						<view>Item {{index +1}}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+
+	<view>
+		<van-dropdown-menu>
+			<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
+			<van-dropdown-item value="{{ value2 }}" options="{{ option2 }}" />
+		</van-dropdown-menu>
+	</view>
+	<view>
+		<van-button type="danger" bind:click="clickdialog">确认dialog</van-button>
+	</view>
+</view>

pages/test/index.wxss

@@ -0,0 +1,14 @@
+.bigcontainer{
+  margin:  0rpx 20rpx;
+}
+.content0{
+  display: flex;
+  justify-content: space-between;
+}
+.content1{
+  display: flex;
+  border: 1px salmon solid;
+}
+.left{
+  width: 200rpx;
+}