本文实例为大家分享了微信小程序横向滑动滚动条的具体代码,供大家参考,具体内容如下
效果图
实现代码
index.wxml
<scroll-view scroll-x="true" class="scroll-view-x" style="padding-top:10rpx" scroll-with-animation="true" wx:if="{{tlist[currentTab].secondList}}" scroll-left='0' bindscroll="getleft"> <!--内容区域--> <view> <view class="navigator_second" wx:for="{{tlist[currentTab].secondList}}" wx:for-item="childItem" bindtap="getProductList" data-id="{{childItem.id}}"> <image class="navigator_icon" src="/UploadFiles/2021-04-02/{{childItem.icon}}">index.js
//获取应用实例 var app = getApp(); Page({ data: { navigate_type:'',//分类类型,是否包含二级分类 slideWidth:'',//滑块宽 slideLeft:0 ,//滑块位置 totalLength:'',//当前滚动列表总长 slideShow:false, slideRatio:'' }, onLoad: function () { var self = this ; var systemInfo = wx.getSystemInfoSync() ; self.setData({ list: _list, windowHeight: app.globalData.navigate_type == 1 "htmlcode">.scroll-view-x{ background-color: #fff; white-space: nowrap; } .navigator_second{ width:150rpx; text-align:center; display:inline-block; height:115rpx; } .navigator_icon{ width:60rpx; height:60rpx; } .navigator_text{ display:block; width:100%; font-size:24rpx } .slide{ height:30rpx; background:#fff; with:100%; padding:14rpx 0 5rpx 0 } .slide .slide-bar{ width:230rpx; margin:0 auto; height:1.5px; background:#eee; } .slide .slide-bar .slide-show{ height:100%; background-color:#ff6969; }项目地址:微信小程序横向滑动滚动条
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“微信小程序scroll-view仿拼多多横向滑动滚动条”评论...
更新动态
20240520
20240520
- 张琍敏1978-雪中莲[台湾复刻版][WAV+CUE]
- 叶蕴仪1993-睡美人[日本版][WAV+CUE]
- 夜晚助兴音乐-群星《新时代床头音乐-性能量》2CD[WAV]
- 24K德国HD金碟《历届奥斯卡获奖金曲》3CD[WAV整轨]
- 邰正宵《重燃爱恋 贰 Walk On》[FLAC/分轨][431.72MB]
- 苏文劭《雨停出来走走》[320K/MP3][81.11MB]
- 苏文劭《雨停出来走走》[FLAC/分轨][210.76MB]
- 群星《2024好听新歌04》十倍音质WAV分轨
- 陈宁《弹指之间HQ》头版限量[低速原抓WAV+CUE]
- 陈宁《故人还》HQCDII限量签名版[低速原抓WAV+CUE]
- 苏文劭《春曲(Lessons)》[320K/MP3][39.8MB]
- 苏文劭《春曲(Lessons)》[FLAC/分轨][97.78MB]
- 群星《2006香港高级视听展原音精选 SACD》[ISO][2G]
- 张琍敏1977-枫林小雨[台湾复刻版][WAV+CUE]
- 林一峰2014-COOKINGMUSIC[香港首版][WAV+CUE]