实现效果如下：
实现左右联动的菜单列表，主要依靠scroll-view的是三个属性：
scroll-top：设置竖向滚动条位置（可视区域最顶部到scroll-view顶部的距离）；
scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素；
bindscroll：滚动时触发，eventdetail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}
结构图示：
wxml:
js:
数据结构：
如果你还想实现从其他页面，点击按钮跳转到当前页面，并且列表滚动到指定项，此项在可视区域的第一个展示：
wxss:
因为对小程序父标签和子标签的布局还不是特别了解，不像ios，父标签固定，子标签通过mansory去布局距离父的底部多少即可。小程序的我能想到的就是动态算出每一个标签的高度，然后总高度减掉就是想得到的子标签的高度了。如果有哪位大神可以指导一二，感激不尽~~~
<view id='viewID'>
<view id="scriptID">
var query = wxcreateSelectorQuery();
//选择id
queryselect('#numID')boundingClientRect()
queryselect('#scriptID')boundingClientRect()
queryexec(function (res) {
//res就是 所有标签为mjltest的元素的信息 的数组
consolelog('所有：',res);
//取高度
thatsetData({
storyHeight:thatdatadetailHeight -(res[0]height+res[1]height)
})
});
您好！很高兴能为您解答， 在微信小程序中，数据缓存其实就和localstorage 的原理差不多，所以理解起来并不难。下面我们来一起实现一下。
效果图展示：
我们在index页面存入数字11，然后在跳转到新页面，在将缓存中的11取出渲染到当前页面。具体代码如下：
index页面：
<span style="font-size:24px;">
<view class="btn-area">
<navigator url="/navigator/navigatortitle=我是navi">跳转到新的页面post情求</navigator>
<navigator url="/redirect/redirecttitle=我是red" redirect>跳转到当前页面</navigator>
</view>
</span>
<view>
<input style="border:2rpx solid red" placeholder="输入信息" bindinput="getInput" />
<button style="border:2rpx solid yellow" bindtap="saveInput">存入</button>
</view>1234567891012345678910
index的js：
//indexjs
//获取应用实例
var app = getApp()
Page({
data: {
storage:''
},
onLoad: function () {
var that = this
//获取输入值
getInput:function(e){
thissetData({
storage:edetailvalue
})
},
//存储输入值
saveInput:function(){
wxsetStorageSync('storage', thisdatastorage)
}
})
12345678910111213141516171819202122231234567891011121314151617181920212223
跳转页面：
<view>从存储中得到的数据:{{storage}}</view>11
跳转页面的js：
var app = getApp();
var that;
Page( {
data: {
storage:''
},
onLoad: function(options) {
that = this;
//获取存储信息
wxgetStorage({
key: 'storage',
success: function(res){
// success
thatsetData({
storage:resdata
})
}
})
}
})
showKnock:function(e){
thissetData({
flags:true,
left:edetailx,
top:edetaily
})
},
这些额外信息可以是传递对象的属性，也可以是对象附带的值；
你可以自己试一试，
如：<view id="" bindtap="getItem"></view>
js:
getItem(e){
consolelog(e);//就可以打印出以下中的数据
var id=ecurrentTargetid;//获取id
var x=edetailx,y=edetaily;//获取位置
}
到demo1-listde的demo1-listdewxml添加输入框和添加按钮
商品名
<input bindinput="getName"></input>
商品价格
<input bindinput="getPrice"></input><!-- 输入框 -->
<button bindtap="addGood" type="primary">添加商品</button><!-- 添加按钮 -->
1
2
3
4
5
1
2
3
4
5
到demo1-listde的demo1-listdewxss添加输入框和添加按钮的样式
input{
border: 1px solid gray;/ 1像素，实心，灰色 /
width: 200px;
}
1
2
3
4
1
2
3
4
保存运行则得到
在这里插入描述
2到demo1-listde的demo1-listdejs
在页面顶端设置全局模式
let name = ''
let price = ''
1
2
1
2
获取用户输入的商品名和价格
getName(n) {
name= ndetailvalue
},
getPrice(n) {
price= ndetailvalue
},
1
2
3
4
5
6
1
2
3
4
5
6
把用户添加的商品添加到数据库
addGood() {
consolelog('商品名', name)
consolelog('商品价格', price)
1
2
3
1
2
3
为了避免代码重复
把下图请添加描述
改为
getList(){
wxclouddatabase()collection("goods")
get()
then(res=> {
consolelog('列表请求成功',res)
thissetData({//把请求的数据赋值给list
list:resdata
})
})
catch(res=> {
consolelog('列表请求失败',err)
})
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
为添加商品制作一个成功或失败提示d窗
if (name == '') {
wxshowToast({//提示d窗
icon:'none',
title: '商品名为空',
})
} else if (price == '') {
wxshowToast({//提示d窗
icon:'none',
title: '价格为空',
})
} else{
consolelog('请添加商品')
wxclouddatabase()collection('goods')
add({
data:{
name: name,
price: price
}
})
then(res =>{
consolelog('添加成功',res)
thisgetList()
})
catch(res =>{
consolelog('添加失败',err)
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
保存运行即可在小程序页面添加商品和价格
更改商品价格
1，到demo11-details的demo11-detailswxml添加输入框和添加按钮
<view>商品名:{{goodname}},价格：{{goodprice}}</view><!-- viem默认有换行的效果 -->
更新商品价格
<input bindinput="getPrice"></input>
<button type="primary" bindtap="update">更新商品价格</button>
1
2
3
4
1
2
3
4
到demo11-details的demo11-detailswxss添加输入框和添加按钮的样式
input{
border: 1px solid gray;
width: 200px
}
1
2
3
4
1
2
3
4
保存运行得到
在这里插入描述
2到demo11-details的demo11-detailsjs
在页面顶部添加全局模式
let price = ''
var id = ''
1
2
1
2
把onLoad板块改为
onLoad(options) {//列表携带的数据，传递到了onload方法里
consolelog('列表携带的值',options)
id = optionsid
thisgetDetail()
}
1
2
3
4
5
1
2
3
4
5
为避免下面代码出现重复
把下图的代码
在这里插入描述
改为
getDetail() {
wxclouddatabase()collection('goods')
doc(id)
get()
then(res=> {
consolelog('精品课程详情页请求成功',res)
thissetData({
good:resdata
})
})
catch(res=>{
consolelog('精品课程详情页请求失败',err)
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
获取新价格
getPrice(n) {
price=ndetailvalue
}
1
2
3
1
2
3
修改商品的价格
update() {
consolelog('新的商品价格',price)
if (price == '') {
wxshowToast({
icon:'none',
title: '价格为空',
})
} else {
wxclouddatabase()collection('goods')
doc(id)
update({
data:{
price:price
}
})
then(res =>{
consolelog('更新成功',res)
thisgetDetail()
})
catch(res =>{
consolelog('更新失败',err)
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
保存运行即可更改商品的价格
删除商品
1，到demo11-details的demo11-detailswxml添加删除按钮
<button type='primary' bindtap="delete">删除当前商品</button>
1
1
2，到demo11-details的demo11-detailsjs
添加删除商品的代码
delete() {
consolelog('点击了删除键',id)
wxshowModal({
title:'提示',
content:'确定要删除这个商品吗',
success(res) {
if (resconfirm) {
consolelog('确定')
//从数据库删除数据
wxclouddatabase()collection('goods')
doc(id)
remove()
then(res => {
consolelog('删除完成',res)
wxnavigateTo({
url: '/pages/demo1-list/demo1-list',
})
})
catch(res=>{
consolelog('删除失败',err)
})
}else if (rescancel) {
consolelog('取消')
}
}
})
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
保存运行即可
完成后的全部代码
demo1-listjs
let name = ''
let price = ''
Page({
onLoad(){
thisgetList()
},
//获取列表数据
getList(){
wxclouddatabase()collection("goods")
get()
then(res=> {
consolelog('列表请求成功',res)
thissetData({//把请求的数据赋值给list
list:resdata
})
})
catch(res=> {
consolelog('列表请求失败',err)
})
},
//跳转到精品课程详情页
toDetail(n) {
consolelog('跳转到精品课程详情页的id',ncurrentTargetdatasetid)
wxnavigateTo({
url: '/pages/demo11-details/demo11-detailsid=' + ncurrentTargetdatasetid,//跳转到商品详情页，并携带商品id
})
},
//获取用户输入的商品名和价格
getName(n) {
name= ndetailvalue
},
getPrice(n) {
price= ndetailvalue
},
//添加商品到数据库
addGood() {
consolelog('商品名', name)
consolelog('商品价格', price)
if (name == '') {
wxshowToast({//提示d窗
icon:'none',
title: '商品名为空',
})
} else if (price == '') {
wxshowToast({//提示d窗
icon:'none',
title: '价格为空',
})
} else{
consolelog('请添加商品')
wxclouddatabase()collection('goods')
add({
data:{
name: name,
price: price
}
})
then(res =>{
consolelog('添加成功',res)
thisgetList()
})
catch(res =>{
consolelog('添加失败',err)
})
}
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
demo1-listwxml
商品名
<input bindinput="getName"></input>
商品价格
<input bindinput="getPrice"></input><!-- 输入框 -->
<button bindtap="addGood" type="primary">添加商品</button><!-- 添加按钮 -->
<view wx:for="{{list}}">
<view bindtap="toDetail" data-id="{{item_id}}">商品名：{{itemname}},价格：{{itemprice}} </view>
</view>
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
demo1-listwxss
input{
border: 1px solid gray;/ 1像素，实心，灰色 /
width: 200px;
}
1
2
3
4
1
2
3
4
demo11-detailsjs
let price = ''
var id = ''
Page({
data:{
good:{}
},
onLoad(options) {//列表携带的数据，传递到了onload方法里
consolelog('列表携带的值',options)
id = optionsid
thisgetDetail()
},
//获取商品的数据
getDetail() {
wxclouddatabase()collection('goods')
doc(id)
get()
then(res=> {
consolelog('精品课程详情页请求成功',res)
thissetData({
good:resdata
})
})
catch(res=>{
consolelog('精品课程详情页请求失败',err)
})
},
//获取新价格
getPrice(n) {
price=ndetailvalue
},
//修改商品价格
update() {
consolelog('新的商品价格',price)
if (price == '') {
wxshowToast({
icon:'none',
title: '价格为空',
})
} else {
wxclouddatabase()collection('goods')
doc(id)
update({
data:{
price:price
}
})
then(res =>{
consolelog('更新成功',res)
thisgetDetail()
})
catch(res =>{
consolelog('更新失败',err)
})
}
},
delete() {
consolelog('点击了删除键',id)
wxshowModal({
title:'提示',
content:'确定要删除这个商品吗',
success(res) {
if (resconfirm) {
consolelog('确定')
//从数据库删除数据
wxclouddatabase()collection('goods')
doc(id)
remove()
then(res => {
consolelog('删除完成',res)
wxnavigateTo({
url: '/pages/demo1-list/demo1-list',
})
})
catch(res=>{
consolelog('删除失败',err)
})
}else if (rescancel) {
consolelog('取消')
}
}
})
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
demo11-detailswxml
<!--pages/demo11-details/demo11-detailswxml-->
<view>商品名:{{goodname}},价格：{{goodprice}}</view><!-- viem默认有换行的效果 -->
更新商品价格
<input bindinput="getPrice"></input>
<button type="primary" bindtap="update">更新商品价格</button>
<button type='primary' bindtap="delete">删除当前商品</button>
demo11-detailswxss
以上就是关于微信小程序实现左右联动的菜单列表全部的内容，包括:微信小程序实现左右联动的菜单列表、微信小程序-动态获取view高度、微信小程序怎么进行数据缓存等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）