微信小程序 scroll-view 水平滾動實現(xiàn)過程解析
更新時間：2019年10月12日 14:40:57 作者：Zero_追夢
這篇文章主要介紹了微信小程序 scroll-view 水平滾動實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
1. scroll-view水平滾動使用
1. wxml
<scroll-view class="scroll-wrap" scroll-x>
<view class="scroll-view-item">
<view class="scroll-img-wrap scroll-major-img-wrap">
<image src="../../images/wukecheng@2x.png" class="img-responsive" />
</view>
<text class="scroll-title scroll-major-title">膳食與營養(yǎng)膳食與營養(yǎng)膳食...</text>
</view>
<view class="scroll-view-item">
<view class="scroll-img-wrap scroll-major-img-wrap">
<image src="../../images/wukecheng@2x.png" class="img-responsive" />
</view>
<text class="scroll-title scroll-major-title">膳食與營養(yǎng)膳食與營養(yǎng)膳食...</text>
</view>
<view class="scroll-view-item">
<view class="scroll-img-wrap scroll-major-img-wrap">
<image src="../../images/wukecheng@2x.png" class="img-responsive" />
</view>
<text class="scroll-title scroll-major-title">膳食與營養(yǎng)膳食與營養(yǎng)膳食...</text>
</view>
<view class="scroll-view-item">
<view class="scroll-img-wrap scroll-major-img-wrap">
<image src="../../images/wukecheng@2x.png" class="img-responsive" />
</view>
<text class="scroll-title scroll-major-title">膳食與營養(yǎng)膳食與營養(yǎng)膳食...</text>
</view>
</scroll-view>
2. wxss
.scroll-wrap {
min-width: 100%;
height: 360rpx;
white-space: nowrap; /*不可缺少*/
}
.scroll-view-item {
width: 68%;
height: 360rpx;
display: inline-block; // 可以使每一項水平排列
}
.scroll-view-item + .scroll-view-item {
margin-left: 16rpx;
}
::-webkit-scrollbar{ // 隱藏滾動條
width: 0;
height: 0;
color: transparent;
}
.scroll-img-wrap {
width: 100%;
height: 280rpx;
overflow: hidden;
border-radius: 8rpx;
}
.scroll-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.scroll-major-img-wrap {
height: 280rpx;
}
.scroll-major-title {
margin: 16rpx 8rpx;
}
2. scroll-view 隱藏滾動條
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}
3. 效果如下：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序自定義tabbar custom-tab-bar 6s出不來解決方案(cover-view不兼容)
- 詳解解決小程序中webview頁面多層history返回問題
- 微信小程序webview與h5通過postMessage實現(xiàn)實時通訊的實現(xiàn)
- 微信小程序移動拖拽視圖-movable-view實例詳解
- 微信小程序webview組件交互,內(nèi)聯(lián)h5頁面并網(wǎng)頁實現(xiàn)微信支付實現(xiàn)解析
- 微信小程序webview 腳手架使用詳解
- 微信小程序與webview交互實現(xiàn)支付功能
- 微信小程序動態(tài)添加view組件的實例代碼
- 微信小程序點擊view動態(tài)添加樣式過程解析
相關(guān)文章
本文主要介紹了js代碼異常監(jiān)控的相關(guān)知識。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
JavaScript實現(xiàn)網(wǎng)頁下拉菜單效果
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁下拉菜單效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
Nuxt.js 是一個基于 Vue.js 的通用應(yīng)用框架。 通過對客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染。這篇文章主要介紹了Nuxt.js開啟SSR渲染 ,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了js實現(xiàn)上傳圖片預(yù)覽的方法,通過自定義函數(shù)結(jié)合onchange方法實現(xiàn)上傳圖片的預(yù)覽功能,非常具有實用價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了js或jquery如何實現(xiàn)頁面打印也可局部打印,需要的朋友可以參考下2014-03-03
下面小編就為大家?guī)硪黄斦刯s遍歷集合(Array,Map,Set)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要通過一張圖讓你看懂JavaScript各類型的關(guān)系，需要的朋友可以參考下2015-10-10
無縫滾動效果在各大網(wǎng)站都有這樣的需求，應(yīng)用非常廣泛，下面小編給大家分享基于JS實現(xiàn)無縫滾動思路及代碼，非常不錯具有參考借鑒價值，感興趣的朋友一起看下吧2016-06-06
JavaScript控制一張圖片旋轉(zhuǎn)，每次旋轉(zhuǎn)90度，可旋轉(zhuǎn)一周360度，以前沒見到過，也不知道有沒有用，奉獻給大家，希望喜歡2011-12-12
2006-09-09