提交

app.json

@@ -1,14 +1,18 @@
 {
-  "pages":[
+    "pages": [
-    "pages/index/index",
+        "pages/test/swiper",
-    "pages/logs/logs"
+        "pages/test/scrollview",
-  ],
+        "pages/test/view",
-  "window":{
+        "pages/index/index",
-    "backgroundTextStyle":"light",
+        "pages/logs/logs"
-    "navigationBarBackgroundColor": "#fff",
+
-    "navigationBarTitleText": "Weixin",
+    ],
-    "navigationBarTextStyle":"black"
+    "window": {
-  },
+        "backgroundTextStyle": "light",
-  "style": "v2",
+        "navigationBarBackgroundColor": "#fff",
-  "sitemapLocation": "sitemap.json"
+        "navigationBarTitleText": "Weixin",
-}
+        "navigationBarTextStyle": "black"
+    },
+    "style": "v2",
+    "sitemapLocation": "sitemap.json"
+}

pages/test/scrollview.js

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

pages/test/scrollview.json

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

pages/test/scrollview.wxml

@@ -0,0 +1,16 @@
+<!--pages/test/scrollview.wxml-->
+<text>pages/test/scrollview.wxml</text>
+<view class="demobox">
+    <view class="title">1.纵向滚动</view>
+    <scroll-view scroll-y="true">
+        <view class="scroll-item-y">第一页</view>
+        <view class="scroll-item-y">第二页</view>
+        <view class="scroll-item-y">第三页</view>
+    </scroll-view>
+    <view class="title">2.横向滚动</view>
+    <scroll-view scroll-x="true">
+        <view class="scroll-item-x">第一页</view>
+        <view class="scroll-item-x">第二页</view>
+        <view class="scroll-item-x">第三页</view>
+    </scroll-view>
+</view>

pages/test/scrollview.wxss

@@ -0,0 +1,20 @@
+/* pages/test/scrollview.wxss */
+scroll-view{
+    width: 100%;
+    height: 300rpx;
+    white-space: nowrap;
+}
+.scroll-item-y{
+    height: 300rpx;
+    line-height: 300rpx;
+    font-size: 30px;
+    background-color: lightblue;
+}
+.scroll-item-x{
+    width: 100%;
+    height: 300rpx;
+    line-height: 300rpx;
+    font-size: 30px;
+    background-color: lightcoral;
+    display: inline-block;
+}

pages/test/swiper.js

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

pages/test/swiper.json

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

pages/test/swiper.wxml

@@ -0,0 +1,16 @@
+<!--pages/test/swiper.wxml-->
+<text>pages/test/swiper.wxml</text>
+<view class="demobox">
+    <view class="title">swiper</view>
+    <swiper indicator-dots="true" autoplay="true" interval="6000" duration="3000">
+        <swiper-item>
+            <view class="swiper-item">第一页</view>
+        </swiper-item>
+        <swiper-item>
+            <view class="swiper-item">第二页</view>
+        </swiper-item>
+        <swiper-item>
+            <view class="swiper-item">第三页</view>
+        </swiper-item>
+    </swiper>
+</view>

pages/test/swiper.wxss

@@ -0,0 +1,10 @@
+/* pages/test/swiper.wxss */
+.swiper-item{
+    height: 300rpx;
+    line-height: 300rpx;
+    background-color: lightblue;
+    font-size: 30px;
+}
+swiper{
+    height: 300rpx;
+}

pages/test/view.js

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

pages/test/view.json

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

pages/test/view.wxml

@@ -0,0 +1,14 @@
+<!--pages/test/view.wxml-->
+<text>pages/test/view.wxml</text>
+<view class="demobox">
+    <view class="title">1.不阻止父容器的view_hover</view>
+    <view class="view_parent" hover-class="view_hover">
+        我是父容器
+        <view class="view_son" hover-class="view_hover">我是子容器</view>
+    </view>
+    <view class="title">2.阻止父容器的view_hover</view>
+    <view class="view_parent" hover-class="view_hover">
+        我是父容器
+        <view class="view_son" hover-class="view_hover" hover-stop-propagation="true">我是子容器</view>
+    </view>
+</view>

pages/test/view.wxss

@@ -0,0 +1,16 @@
+/* pages/test/view.wxss */
+.view_parent{
+    width: 100%;
+    height: 300rpx;
+    background-color: lightblue;
+}
+.view_son{
+    width: 50%;
+    height: 150rpx;
+    margin-left: 25%;
+    margin-top: 50rpx;
+    background-color: lightyellow;
+}
+.view_hover{
+    background-color: red;
+}