新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
微信小程序scroll-view水平滾動實現(xiàn)過程解析
1. scroll-view水平滾動使用
創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比甘肅網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式甘肅網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們,業(yè)務(wù)覆蓋甘肅地區(qū)。費用合理售后完善,10余年實體公司更值得信賴。
1. wxml
膳食與營養(yǎng)膳食與營養(yǎng)膳食... 膳食與營養(yǎng)膳食與營養(yǎng)膳食... 膳食與營養(yǎng)膳食與營養(yǎng)膳食... 膳食與營養(yǎng)膳食與營養(yǎng)膳食...
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í)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章題目:微信小程序scroll-view水平滾動實現(xiàn)過程解析
當(dāng)前URL:http://www.dlmjj.cn/article/jjisji.html