小程式scroll-view上下滑的內部加左右滑，scroll-x生效的情況

阿新 • • 發佈：2019-02-10

今天做了下滑塊裡包含左右滑的效果，由於scroll-view 左右滑說的不夠清楚，只能百度和看別人的例子了。還好scroll-view裡面可以巢狀scroll-view，不然還要處理其他的問題。不囉嗦咯，上例子，由於例子的圖片都不存在。所以就把圖片註釋掉了。複製貼上看效果的呢需要自己新增點圖片和陣列哦。如果有不懂的可以評論，我記得會回覆的。

<!--pages/cxtripHomePage/cxtripHomePage.wxml-->
<view class='shan-container'>
    <!-- 展示輸入搜尋框 -->
    <view class='show-search'>
        <view class='show-scan' catchtap='codeScan'>
            <!-- <image src='../img/cxtripHomePage/scan.png'></image> -->
        </view>
        <view class='show-big-search'>
            <view class='the-search'>
                <view class='input-search'>
                    <input type='text' class='input' confirm-type="search" bindinput="inputSearchContent" bindconfirm="searchProduct" placeholder='關鍵詞' placeholder-style=''></input>
                </view>
                <view class='search-icon' catchtap='searchProduct'>
                    <!-- <image wx-if="{{}}" src='../img/cxtripHomePage/search.png'></image> -->
                </view>
            </view>
        </view>
        <view class='show-message' catchtap='messages'>
            <!-- <image wx-if="{{}}"  src='../img/cxtripHomePage/message.png'></image> -->
            <view class='weui-badge {{noRead ==0?"noneDisplay":""}}'>{{noRead}}</view>
        </view>
    </view>
    <!-- 上下滑設定 -->
    <scroll-view class='shan-content' scroll-y>
        <!-- banner -->
        <view class='banner'>
            <!-- <image src='../img/cxtripHomePage/banner.png' mode='aspectFill'></image> -->
        </view>
        <!-- 主營業務 左右滑位置-->
        <view class='business'>
            <view class='business-content box-shadow'>
                <scroll-view class='shan-scroll-x' scroll-x scroll-left="{{shanScrollLeft}}" bindscroll="nextOrPrev">
                    <view class='part-of-business' data-index="0" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/train_car.png'></image> -->
                        <view>xxxx</view>
                    </view>
                    <view class='part-of-business' data-index="1" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/ticket.png'></image> -->
                        <view>zzzzz</view>
                    </view>
                    <view class='part-of-business' data-index="2" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/hotel.png'></image> -->
                        <view>saaaaaa</view>
                    </view>
                    <view class='part-of-business' data-index="3" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/service.png'></image> -->
                        <view>qqqqq</view>
                    </view>
                     <view class='part-of-business' data-index="4" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/specialty.png'></image> -->
                        <view>wereret</view>
                    </view>
                    <view class='part-of-business' data-index="5" catchtap='navicationToWhere'>
                        <!-- <image src='../img/cxtripHomePage/delicacy.png'></image> -->
                        <view>tuyuyjhjghh</view>
                    </view>
                </scroll-view>
                <view class='point'>
                    <view class='all-point'>
                        <view class='shan-point first {{pointActive?"pointActive":""}}' data-shanindex="1" catchtap='getLeftScroll'></view>
                        <view class='shan-point {{pointActive?"":"pointActive"}}'  data-shanindex="2" catchtap='getLeftScroll'></view>
                    </view>
                </view>
            </view>
        </view>
        <view class='business'>
            <view class='business-content box-shadow marginbottom'>
                <view class='show-hot-scenic'>推薦</view>
                <block wx:for="{{list}}" wx:key="{{index}}">
                    <view wx:if="{{item.IMG_URL}}" class='part-of-hot' data-img-urls="{{item.ORGN_NAME}}" data-index="{{index}}" catchtap='getDetailIntroduce'>
                        <image src='{{item.IMG_URL}}'></image>
                        <view class='ticket-introduce'>{{item.ORGN_NAME || item.agent_name}}</view>
                    </view>
                </block>
            </view>
        </view>
    </scroll-view>
    <include src="../common/common_footer/common_footer.wxml" />
</view>

css部分

page {
    width: 100%;
    height: 100%;
}


/* 小圓圈資訊提示 */

.weui-badge {
    background-color: #ec7f5e;
    color: #fff;
    width: 32rpx;
    height: 32rpx;
    border-radius: 32rpx;
    line-height: 32rpx;
    padding: 0;
    position: absolute;
    top: 16%;
    right: 15%;
}

/* 搜尋最大view*/

.show-search {
    width: 100%;
    height: 90rpx;
}

/* 搜尋的方式每個view的公共部分 */

.show-search>view {
    height: 100%;
    float: left;
}

/* 展示訊息及掃碼部分 */

.show-scan, .show-message {
    width: 15%;
    line-height: 90rpx;
    text-align: center;
}

/* 訊息提醒相對定位 */

.show-message {
    position: relative;
}

/* 展示最大的搜尋部分 */

.show-big-search {
    width: 68%;
}

/* 掃碼時的img多大 */

.show-scan>image {
    width: 44rpx;
    height: 44rpx;
    vertical-align: middle;
}

/* 訊息圖示的大小 */

.show-message>image {
    width: 42rpx;
    height: 42rpx;
    vertical-align: middle;
}

/* 展示資訊提示 */

.message_tip {
    position: absolute;
    top: 25%;
    right: 18%;
    width: 25rpx;
    height: 25rpx;
    border-radius: 25rpx;
    background: #ec7f5e;
    color: #fff;
    font-size: 19rpx;
    line-height: 25rpx;
    text-align: center;
}

/* 顯示搜尋框和搜尋放大鏡 */

.the-search {
    width: 100%;
    height: 75%;
    background: #fff;
    border-radius: 14rpx;
    margin-top: 12rpx;
    overflow: hidden;
}

/* 展示搜尋的放大鏡和input的公共佈局 */

.the-search>view {
    float: left;
    height: 100%;
    line-height: 63rpx;
}

/* 輸入框百分比 */

.input-search {
    width: 85%;
}

/* input框的設定 */

.input {
    width: 97%;
    height: 100%;
    font-size: 26rpx;
    padding-left: 5%;
    border: none;
    outline: none;
    text-align: left;
}

/* 放大鏡的設定 */

.search-icon {
    width: 15%;
    text-align: center;
}

/* 放大鏡的大小 */

.search-icon>image {
    width: 38rpx;
    height: 38rpx;
    vertical-align: middle;
}

/* 滑動區域 */

.shan-content {
    position: absolute;
    top: 90rpx;
    left: 0;
    right: 0;
    bottom: 0rpx;
}

/* 展示圖片 */

.banner {
    width: 100%;
    height: 300rpx;
}

/* banner圖片的大小 */

.banner>image {
    width: 100%;
    height: 100%;
}

/* 主營業務大view */

.business {
    width: 94%;
    height: auto;
    margin-top: 20rpx;
    padding-left: 3%;
}

/* 居中 */

.shanshowBusiness {
    width: 12.5%;
    height: 230rpx;
    float: left;
    text-align: center;
    margin: 0 auto;
}

/* 主營業務帶陰影 */

.box-shadow {
    width: 100%;
    border-radius: 20rpx;
    background: #fff;
    box-shadow: 0 0 40rpx rgba(1, 130, 125, 0.14);
    overflow: hidden;
}

/* scroll-x左右滑動 */
.shan-scroll-x {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    height: 220rpx;
}

/* 展示主營業務的每一個 */

.part-of-business {
    width: 25%;
    height: 220rpx;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
}

/* 業務的圖片 */

.part-of-business image {
    width: 110rpx;
    height: 110rpx;
    margin-top: 38rpx;
}

/* 主營業務的小塊 */

.part-of-business view {
    font-size: 28rpx;
    margin-top: -5rpx;
}
/*展示滑動時左邊右邊兩頁*/
.point{
    width: 100%;
    height: 30rpx;
    background: #fff;
}
/*小點的內容*/
.all-point{
    width: 80rpx;
    margin: 0 auto;
    height:18rpx;
    overflow: hidden;
}
.shan-point{
    margin-left: 15rpx;
    width: 18rpx;
    height: 18rpx;
    background: #c1e6d9;
    border-radius: 18rpx;
    float: left;
}
.pointActive{
    background: #6ed0ad;
}
/* 熱門推薦文字 */

.show-hot-scenic {
    margin-top: 16rpx;
    width: 97%;
    height: 60rpx;
    padding-left: 3%;
    line-height: 60rpx;
    font-size: 30rpx;
    margin-bottom: 10rpx;
}

/* 熱門部分 */

.part-of-hot {
    width: 46%;
    height: 250rpx;
    padding-left: 2.8%;
    float: left;
}

/* 熱門圖片 */

.part-of-hot image {
    width: 100%;
    height: 150rpx;
    border-radius: 10rpx;
}

/* 熱門名字 */

.ticket-introduce {
    height: 70rpx;
    line-height: 35rpx;
    font-size: 26rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* 距離底部 */

.marginbottom {
    margin-bottom: 30rpx;
}

/* 滾動條 */

::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
}

.noneDisplay {
    display: none;
}

js部分就是為了滑動時寫的一部分

var util = require('../../utils/util.js');
var loginStatus = true;
Page({

    /**
     * 頁面的初始資料
     */
    data: {
        imgHome: true,
        imgPersonal: false,
        list: [],//得到熱門推薦列表
        lastCode: "",//得到login返回的code
        inputValue: "",//得到搜尋框的內容
        href: "",
        pointActive:true,//用於主營業務左頁和右頁
        shanScrollLeft:0,//主營業務左邊滾或右邊滾動
    },
    /**
     * 得到跳轉的是酒店還是門票還是景點
     */
    navicationToWhere: function (e) {
        var index = e.currentTarget.dataset.index;
        if (index == 0){
            //直通車
            wx.navigateTo({
                url: '../direct_train/directHomepage/directHomepage?isServes=1',
            })
        }else if (index == 1) {
             //票務
            wx.navigateTo({
                url: '../direct_train/directHomepage/directHomepage?isServes=2',
            })
        } else if (index == 2) {
            //酒店
            wx.navigateTo({
                url: '../direct_train/hotelScenicList/hotelScenicList?dataTypes=2',
            })
        } else if (index == 3) {
            //訂製旅遊
            wx.navigateTo({
                url: '../direct_train/ticketDetail/ticketDetail?isCustomTourismsa=true',
            })
        } else if (index == 4) {
            //特產
            wx.navigateTo({
                url: '../direct_train/specialtyList/specialtyListsha',
            })
        } 
    },
    /**
     * 主營業務部分的內容顯示(滑動效果上一頁下一頁)
     */
    nextOrPrev:function(e){
        let scrollLeft = e.detail.scrollLeft;
        if (scrollLeft>=40){
            this.setData({ pointActive:false});
        }else{
            this.setData({ pointActive: true });
        }
    },
    /**
     * 點選主營業務下的上一頁下一頁
     */
    getLeftScroll:function(e){
        // shanScrollLeft=86
        let index = e.currentTarget.dataset.shanindex;
        if (index ==1){
            this.setData({ pointActive: true, shanScrollLeft:0 });
        }else if(index ==2){
            // this.setData({ pointActive: false, shanScrollLeft: 174  });
            this.setData({ pointActive: false, shanScrollLeft: 88 });
        }
    },
    
    /**
     * 得到路徑
     */
    tapNavToWhere: function (e) {
        var index = e.currentTarget.dataset.hotIndex;
        var ticketcode = this.data.list[index].productId;
        var productName = this.data.list[index].productName;
        wx.setStorageSync("imgUrls", e.currentTarget.dataset.imgUrls);
        wx.navigateTo({
            url: '../direct_train/ticketDetail/ticketDetail?ticketcode=' + ticketcode + '&productName=' + productName + '',
        })
    },

    /**
     * 熱門推薦部分
     */
    getHot: function () {
        var that = this;
        //sessionChoose 1是帶sessionID的GET方法  2是不帶sessionID的GET方法, 3是帶sessionID的Post方法,4是不帶sessionID的Post方法
        // util.HttpRequst(true, "ztc/product/getRecommendProduct", 3, wx.getStorageSync("sessionId"), {}, "POST", false, function (res) {
        //     console.log('getRecommendProduct', res)
        //     // if (res.code == 200) {
        //     //     that.setData({ list: res.list });
        //     // }
        // })
    },

    /**
     * 生命週期函式--監聽頁面載入
     */
    onLoad: function (options) {
        wx.removeStorageSync('searchValue');
        this.getHot();
    },

    onShow: function () {
        wx.removeStorageSync('searchValue');
    },
})

上下滑就可以實現了，主要是左右滑的時候可滑動的大view要這樣寫

/* scroll-x左右滑動 */
.shan-scroll-x {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    height: 220rpx;
}

每一個小view不能用display：flex或者float：left，這樣都不生效的。要像下面那樣寫

/* 展示主營業務的每一個 */

.part-of-business {
    width: 25%;
    height: 220rpx;
    display: inline-block;
    text-align: center;
    margin: 0 auto;
}

需要注意的已經特意標出來了，希望小夥伴在做的時候多注意

小程式scroll-view上下滑的內部加左右滑，scroll-x生效的情況

今天做了下滑塊裡包含左右滑的效果，由於scroll-view 左右滑說的不夠清楚，只能百度和看別人的例子了。還好scroll-view裡面可以巢狀scroll-view，不然還要處理其他的問題。不囉嗦咯，上例子，由於例子的圖片都不存在。所以就把圖片註釋掉了。複製貼上看效果的

小程式資料列表上下滑的內部加左右滑

如圖，左邊是固定的，右邊內容是可以左右滑動的，上面和下面部分也是固定的，整個可以上下滑動。 wxml: <view class="top"> <view class='topLeft'></view> <scr

微信小程式-scroll-view上拉多次觸發載入事件

之前那篇部落格裡邊寫了滑塊的margin屬性影響了滑動效果。這篇文章寫一下上拉時多次觸發上拉載入事件。（改好的程式碼如下）其實也比較簡單，就是有可能沒有意識到這個小細節。在官方文件中有這麼一個屬性（如圖）。這個屬性是設定距離底部多少距離是觸發事件。我們吧這個屬性設定成0就可以了。只有上拉到最

小程式中圖片上傳

前端小程式：wxml  <import src="/huitianxia/view/common/foot.wxml"/> <view class='wrappe

微信小程式web-view元件

小程式web-view元件不久前微信小程式釋出了web-view元件，這個訊息在各個圈裡引起不小的漣漪。近期正好在做小程式的專案，便研究了一下這個讓大家充滿期待的元件。 1，web-view這個元件是什麼鬼？官網的介紹：web-view 元件是一個

微信小程式web-view例項

微信小程式web-view例項 index.js //index.js //獲取應用例項 const app = getApp() Page({ /** * 頁面的初始資料 */ data: { },

wechat-小程式web-view與網頁互動

wechat-小程式web-view與網頁互動. 官方api說明文件: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 前置物料啟動好一個網

小程式用view畫圓

畫多種圓效果圖 test.wxml <view class='wrpg-top'> <view class='clike'> <view class="element"> <view class="child

小程式web-view使用

微信 web-view的使用： <web-view src="https://www.xxxxxxxxx.com/index.html" /> 從h5頁面跳到小程式的其他頁面：  <script t

微信小程式多圖上傳解決方案

為了使程式碼體積小我這裡講多圖上傳封裝到單獨的一個js 頁面的js呼叫他我們看firhealth.js檔案內容 // pages/home/home.js var upload = require('../../style/upload.js'); Pag

小程式單圖上傳到伺服器

// 上傳營業執照 fail_yingye(e) { var that = this; var uniacid = app.siteInfo.uniacid; var idx = e.currentTarget.dataset.index;

微信小程式--Web-View重新整理Html頁面（改）

最近進行小程式開發，因為主體上是複用了公眾號的內容，所有采用了Web-View載入H5的方式進行，其中有一個需求是連線藍芽裝置收集資料並上傳到後臺，點選H5中的按鈕，進入到藍芽採集頁面，然後在採集完資料後，跳回H5頁面並重新整理。在H5中呼叫wx.miniProgram.navigateT

微信小程式之view動態佈局

wxml <view class='main'> <view wx:for="{{long}}" wx:key="*this" class='items'> <view class='il'>{{item[0].acmonth}}</

微信小程式-元件-view標籤

簡單來說，可以理解為 view標籤相當於div標籤。 view 具有屬性名 hover-class <view hover-class="color-red" >點我改變字型顏色 </view> 如果設定 color-red 為紅色，則點選view

小程式--返回重新整理上一個頁面

若從A頁面跳到B頁面（A—>B），在B頁面操作完成後需要重新整理A頁面的資料，有兩種思路：（推薦使用第2種方法） 1.在返回A頁面的時候呼叫A的頁面onShow()方法，重新查詢載入一次A頁面即可，程式碼為： onShow: function () { this.onLoad(

微信小程式中實現上傳視訊的開發程式碼

index.wxml <view class="image-plus image-plus-nb" bindtap="chooseVideo"> <view class="image-plus-horizontal"></view> &l

微信小程式實現View子節點每行固定顯示數目，多出來自動換行

需求是這樣的：需要根據後臺傳入的資料動態生成view控制元件，固定每行展示三個，多出來的自動換行。如果用js來寫想必比較簡單，由於接觸微信小程式時間不算太長，對於前端的一些寫法難免運用不是很熟練。這是我的目錄結構：相關的思路我已經在程

微信小程式多媒體檔案上傳及下載（springboot框架中）

/** * 微信檔案上傳介面 * @param file 待上傳檔案的完整路徑 */ public FileUploadOrDownload uploadTempMedia(String file) { /

小程式web-view頁面巢狀pdf.js網頁注意事項

近段時間使用小程式開發時，有一個使用說明模組需要用pdf.js來展示PDF內容。在安卓中是可以正常顯示的，在IOS中會報無法讀取PDF檔案的錯誤。解決方法：web-view連結到一個過渡頁面 var u = navigator.userAgent;

微信小程式開發(5)——上傳多張圖片

上傳圖片的流程是：本地將圖片上傳到——》微信臨時伺服器，能夠返回臨時圖片檔案地址——》再將臨時圖片檔案地址傳輸給服務端——》服務端從微信伺服器上下載臨時圖片檔案儲存在服務端上這個流程有點繞，花了點時間，踩了幾腳坑才成功。 1.圖片選擇框 <view class=

小程式scroll-view上下滑的內部加左右滑，scroll-x生效的情況

相關推薦