微信小程序实现左右联动的菜单列表

实现效果如下：

实现左右联动的菜单列表，主要依靠scroll-view的是三个属性：

scroll-top：设置竖向滚动条位置（可视区域最顶部到scroll-view顶部的距离）；

scroll-into-view：值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素；

bindscroll：滚动时触发，eventdetail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

结构图示：

wxml:

js:

数据结构：

如果你还想实现从其他页面，点击按钮跳转到当前页面，并且列表滚动到指定项，此项在可视区域的第一个展示：

wxss:

微信小程序Swiper做Tab切换，带tab切换动画

小程序中我们做tab切换一般情况下可以做点击切换，但是有Swiper组件，其实我们也可以做滑动切换

监听Swiper的bindchange，我们就可以在切换时改变tab的选装状态达到切换的目的。

但是这样的方式tab的切换方式是跳转式的，体验不是很好。于是就有了这个demo，我们一步步优化切换体验。

首先：利用flex布局，做出tab区域，如果tab选项卡很多可以使用Scroll-view；一般的跳转式的tab用boder-bottom实现就好，这里我们加了一个“navbar-slider”，加上translateX动画实现平移切换。

然后：计算出每个tabItem的宽度，和每个item距离0坐标的距离；下中50是slider的宽度，对应上面“width:50px;”

关联：1、监听item点击，切换swiper；2、监听swiper切换改变slider位置和tab显示

效果展示如下：

现在我们已经实现了，Swiper和tab的带动画联动，但是我们可以发现，我们的切换动画是在切换之后进行的，我们这里还可以继续优化。

swiper在切换时可以监听bindtransition，swiper-item 的位置发生改变时会触发 transition 事件，eventdetail = {dx: dx, dy: dy}，dx则是平移的偏移量，我们可以通过这个监听来实时设置slider的位置。

切换后校正slider的位置，这里我们不能使用bindchange来校正，因为bindchange在切换时手指释放的时候就调用了，我们这里使用bindanimationfinish回调来校正（动画结束时会触发 animationfinish 事件，eventdetail 同上）

最终：展示如下

在小程序开发文档中明确说明了最好不要频繁调用setData，我们最后这种方式就会频繁的调用，所以这里其实只是提供这种思路，但是工程中并不建议这么使用

小程序开发者文档

SwiperTab

因为对小程序父标签和子标签的布局还不是特别了解，不像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)

          })

        });

小程序授权和登录，授权在先。

1、当用户进入微信小程序时，首先我们先判断用户是否授权过此小程序

2、如果没有授权，我们通过一个按钮来实现授权登录

3、通过bindgetuserinfo事件，我们可以获取到个人的信息、加密偏移数据、加密用户信息（edetail获取）

4、用户可以授权登录，也可以取消授权

5、根据登录接口返回的code码，判断用户是否时新用户。

如果不是新用户，我们就直接保存下token（服务器返回的token）；如果是新用户，我们就要先注册，再登录。

6、当用户注册成功后，在调登录接口，保存token。在有些页面需要使用token

7、在步骤1中，当我们授权过时，我们要看token是否存在

8、当token存在时，我们直接执行逻辑代码

9、当token不存在时，我们就需要登录，登录后判断返回的code码，在根据code码判断用户是否是新用户。最后保存token

showKnock:function(e){

    thissetData({

        flags:true,

        left:edetailx,

        top:edetaily

    })

},

这个问题遇到多次了，很多人单看这句话提示，会去检查自己的微信版本，其实这个跟微信版本没有关系，这是微信小程序的基础库版本过高造成的。

去小程序的开发后台设置这里更改一下版本库到2212， 亲测这个版本pc是可以打开微信小程序的。

但是这里会有一个bug，就是，微信最近不是回收了这个权限吗， wxgetUserProfile({

desc: “获取你的昵称、头像、地区及性别”,

success: res => {}}）

就是微信后台不会再给我们返回用户头像 昵称了。 改造了一下，让用户主动触发去上传头像，昵称。

<button open-type="chooseAvatar" bindchooseavatar="onChooseAvatar" style="width: 200rpx;padding: 0;margin: 0 auto;">

1

1

点击，可更改 点击更新 onChooseAvatar(e) { consolelog(e) const { avatarUrl } = edetail wxgetFileSystemManager()readFile({ filePath: edetailavatarUrl , //选择返回的相对路径 encoding: 'base64', //编码格式 success: res => { //成功的回调 // consolelog('data:image/png;base64,' + resdata) thissetData({ base64img:'data:image/png;base64,' + resdata }) } }) thissetData({ avatarUrl, }) wxsetStorageSync('img', edetailavatarUrl ) }, handleusername(e){ consolelog(e) thissetData({ username: edetailvalue }) wxsetStorageSync('username', edetailvalue ) },

这有涉及到另一个问题，因为 open-type=“chooseAvatar” pc端也有最低版本库要求，2245，（当初这里还折磨了我很久，我当时用的版本库是2212，手机能获取头像，但是pc死活不能，后来在社区交流发现是版本库的设置问题。 所以记录一下走过的坑吧~~）

这就很尴尬了，我为了获取头像，那么我得升级版本库。但是为了pc端能打开小程序，我又得降级版本库。。。 那么取其一，还是降级为2212了。 小程序获取头像在真机上获取吧。

以上就是关于微信小程序实现左右联动的菜单列表全部的内容，包括:微信小程序实现左右联动的菜单列表、小程序Swiper做Tab切换，带tab切换动画、微信小程序-动态获取view高度等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！