小程序实现标尺滑动

不念不忘少年蓝@ 2023-06-10 15:28 191阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70][]

html部分：

<view>

<scroll-view class="ageContent" scroll-left="\{ \{ageScrolLeft\}\}" scroll-x="true" bindscroll="agescroll" style="height:46px;" >

<view class="ageItem \{ \{ageItemStatus\[index\]\}\}">\{ \{age\[index\]\}\}</view>

</block>

</scroll-view>

</view>

<view class="curHeight">\{ \{curHeight\}\}<text class="heightt1">cm</text>

</view>

<scroll-view class="heightContent" scroll-left="\{ \{heightScrolLeft\}\}" scroll-x="true" bindscroll="heightscroll" style="height:58px;" >

<view class="heightItem \{ \{heightItemStatus\[heightindex\]\}\}">\{ \{height\[index\]\}\}</view>

</block>

</scroll-view>

</view>

<view class="curweight">\{ \{curweight\}\}<text class="heightt1">kg</text>

</view>

<scroll-view class="weightContent" scroll-left="\{ \{weightScrolLeft\}\}" scroll-x="true" bindscroll="weightscroll" style="height:58px;" >

<view class="weightItem \{ \{weighttItemStatus\[index\]\}\}">\{ \{weight\[index\]\}\}</view>

</block>

</scroll-view>

</view>

js部分：

// pages/test-rules/test-rules.js

Page(\{

/\*\*

\* 页面的初始数据

\*/

data: \{

age: \[''\],

ageItemStatus: \['', ''\],

ageScrolLeft: '',

curHeight: 40,

height: \[''\],

heightScrolLeft: '',

curweight: 20,

weight: \[''\],

weightScrolLeft: '',

\},

/\*\*

\* 生命周期函数--监听页面加载

\*/

onLoad: function (options) \{

var that = this;

var age = \[\];

for (var i = 0; i < 100; i++) \{

age\[i\] = i;

var ageItemStatus = that.data.ageItemStatus;

ageItemStatus\[26\] = 'active';

var height = \[\];

for (var i = 0; i < 300; i++) \{

height\[i\] = i;

//console.info("身高", height)

var heightItemStatus = that.data.heightItemStatus;

var weight = \[\];

for (var i = 0; i < 200; i++) \{

weight\[i\] = i;

//console.info("体重", weight)

that.setData(\{

age: age,

ageItemStatus: ageItemStatus,

height: height,

heightItemStatus: heightItemStatus,

weight: weight,

\})

//console.info("年龄：",age)

\},

/\*\*

\* 生命周期函数--监听页面初次渲染完成

\*/

onReady: function () \{

\},

/\*\*

\* 生命周期函数--监听页面显示

\*/

onShow: function () \{

\},

/\*\*

\* 生命周期函数--监听页面隐藏

\*/

onHide: function () \{

\},

/\*\*

\* 生命周期函数--监听页面卸载

\*/

onUnload: function () \{

\},

/\*\*

\* 页面相关事件处理函数--监听用户下拉动作

\*/

onPullDownRefresh: function () \{

\},

/\*\*

\* 页面上拉触底事件的处理函数

\*/

onReachBottom: function () \{

\},

/\*\*

\* 用户点击右上角分享

\*/

onShareAppMessage: function () \{

\},

// 年龄滑动

agescroll: function (e) \{

console.log(e.detail.scrollLeft);

var scrollLeft = e.detail.scrollLeft;

var index = (parseInt(scrollLeft) / 64 + 2).toFixed(0);

console.info("对应的年龄", index);

var status = \[\];

for (var i = 0; i < 100; i++) \{

status\[i\] = \[\];

status\[index\] = 'active';

this.setData(\{

ageItemStatus: status,

ageStr: index,

\})

\},

//身高滑动

heightscroll: function (e) \{

console.log(e.detail.scrollLeft);

var scrollLeft = e.detail.scrollLeft;

var index = ((parseInt(scrollLeft) - 36) / 36 \* 10 + 50).toFixed(0);

console.info("对应的身高", index);

this.setData(\{

curHeight: index,

heightIndex: index

\})

\},

//体重滑动

weightscroll: function (e) \{

console.log(e.detail.scrollLeft);

var scrollLeft = e.detail.scrollLeft;

var index = (((parseInt(scrollLeft) - 36) / 36 \* 10 + 50) / 2).toFixed(1);

console.info("对应的体重", index);

this.setData(\{

curweight: index,

weightIndex: index

\})

\},

\})

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMTEzNjA_size_16_color_FFFFFF_t_70]: /images/20230531/28cab3cba3954e20a77eabf5b70262f4.png

小程序实现标尺滑动

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关小程序 slider 双向滑动

相关小程序实现标尺滑动

相关小程序实现左右滑动-答题等

相关 android自定义标尺,Android自定义标尺滑动选择值效果

相关小程序实现滑动吸附效果

相关小程序--左侧滑动效果

相关小程序-左右滑动效果

相关小程序滑动悬浮tab

相关小程序-监听手势滑动

相关小程序判断滑动方向