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

实现效果如下：

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

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

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

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

结构图示：

wxml:

js:

数据结构：

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

wxss:

小程序开发推荐使用uni-app,它是一个使用Vuejs开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

uni，读youni，是统一的意思。

很多人以为小程序是微信先推出的，其实，DCloud才是这个行业的开创者。

DCloud于2012年开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。

2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是模式的轻应用，而是能接近原生功能、性能的动态App，并且即点即用。

为将该技术发扬光大，DCloud将技术标准捐献给工信部旗下的HTML5中国产业联盟，并推进各家流量巨头接入该标准，开展小程序业务。

360手机助手率先接入，在其34版本实现应用的秒开运行。

随后DCloud推动大众点评、携程、京东、有道词典、唯品会等众多开发者为流应用平台提供应用。

在2015年9月，DCloud推进微信团队开展小程序业务，演示了流应用的秒开应用、扫码获取应用、分享链接获取应用等众多场景案例，以及分享了webview体验优化的经验。

微信团队经过分析，于2016年初决定上线小程序业务，但其没有接入联盟标准，而是订制了自己的标准。

DCloud持续在业内普及小程序理念，推进各大流量巨头，包括手机厂商，陆续上线类似小程序/快应用等业务。

部分公司接入了联盟标准，但更多公司因利益纷争严重，标准难以统一。

技术是纯粹的，不应该因为商业利益而分裂。开发者面对如此多的私有标准不是一件正确的事情。

虽然是始作俑者，但造成混乱的局面非DCloud所愿。于是我们决定开发一个免费开源的框架。

既然各巨头无法在标准上达成一致，那么就通过这个框架为开发者抹平各平台差异。

这，就是uni-app的由来。

因为多年积累，所以DCloud拥有300多万开发者，并不意外因为DCloud一直都有小程序的iOS、Android引擎，所以uni-app的App端和小程序端保持高度一致，并不意外因为DCloud在引擎上的持续投入，所以uni-app的App端功能、性能比大多数小程序引擎都优秀，并不意外因为DCloud对各家小程序太了解了，所以做好抹平各端差异的跨端框架，并不意外

现在，uni-app已经是业内最风靡的应用框架，支撑着6亿手机用户的庞大生态。

世界兜兜转转，当你踏出第一步时，随后很多事不会按你的预期发展。但只要你不忘初心，你想要的那个目标，最终会换个方式实现。

DCloud的初心是什么？

为开发者提供免费、高效的开发工具，让天下没有难做的应用改进应用形态，让用户更方便的获取数字服务

DCloud也再次承诺不会对uni-app、HBuilderX等工具收费，感谢数百万开发者的一路陪伴，也请一直监督我们不忘初心！

1、利用样式实现小程序动画(用法和css用法相识)

wxml 文件

<image class="aniamtion" src="//images/page4jfif" style="width:200rpx;height:200rpx;  position:  relative;"></image>

wxss文件

aniamtion {

animation: mymove 5s infinite;

/ //infinite属性是表示无限循环的意思，没有这个属性的话动画只执行一次。 /

}

@keyframes mymove {

from {

  / left: 0px; /

/ transform: rotate(7deg) skew(50deg) translate(30rpx,30rpx); /

transform: rotate3d(100,200,300,0deg);

}

to {

 / left: 200px; /

/ transform: rotate(7deg) skew(5deg) translate(100rpx,100rpx); /

transform: rotate3d(200,300,400,360deg);

}

}

2、 用小程序的API来实现动画

用wxcreateAnimation(object) 来创建一个动画 -->返回一个animation对象

创建一个动画实例 animation。

onReady: function () {

thisanimation = wxcreateAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

调用实例的方法来描述动画。

Animationstep() 表示一组动画的完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画

rotate(){

thisanimationrotate(150)step() //对动画进行简单的描述

thissetData({

         animation:thisanimationexport()

})

},

最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。

thisanimationexport() 导出动画队列。export 方法每次调用后会清掉之前的动画 *** 作

rotate(){

thisanimationrotate(150)step() //对动画进行简单的描述

thissetData({ // 在setData({}) 导出动画数据数据给组件

         animation:thisanimationexport()

})

},

完整的wxml

<view class="container">

<view animation="{{animation}}" class="view">

将做动画的块

</view>

</view>

<button type="default" size="mini" bindtap="rotate">

旋转

</button>

完整的wxjs

Page({

data: {

animation:''

},

onReady: function () {

thisanimation = wxcreateAnimation({

duration:1000,

timingFunction:'linear',

delay:100,

transformOrigin:"left top 0"

})

},

rotate(){

thisanimationrotate(150)step()translate(100)step()

thissetData({

animation:thisanimationexport()

})

}

})

3、用选择器来绑定组件来来实现组件的动画（小程序290 的库可用，版本不够会报thisanimate不是一个方法）

<text>pages/index7/index7wxml</text>

<view id="container" style="height: 100px; width: 100px; background-color: blue;">

container

</view>

<view class="block" style="height: 100px; width: 100px;background-color: #ccc;">

block

</view>

用选择器选择相应的组件进行相应的动画

进行关键帧的处理

onLoad: function () {

  thisanimate('#container', [

    { opacity: 10, rotate: 0, backgroundColor: '#FF0000' },

    { opacity: 05, rotate: 45, backgroundColor: '#00FF00' },

    { opacity: 10, rotate: 90, backgroundColor: '#FF0000' },

  ], 5000)

  thisanimate('block', [

    { scale: [1, 1], rotate: 0, ease: 'ease-out' },

    { scale: [15, 15], rotate: 45, ease: 'ease-in'},

    { scale: [2, 2], rotate: 90 },

  ], 5000)

},

}

4、用第三方的库 animationcss

需要做的有

从>

把 css 文件 改名成 wxss文件（可进行相应的需改，毕竟小程序的大小限制摆在那里）

把它引入到你的appwxss文件中

@import “动画文件的相对目录”

在用的时候把他和你的样式绑定

<view class="swing" style="height: 100px; width: 100px;background-color: #ccc;">

block

</view>

// 给类名为swing 的文件绑定swing 的动画

swing{

animation: swing 5s infinite;

}

微信小程序的左右滑动触屏事件，主要有三个事件：touchstart，touchmove，touchend。

这三个事件最重要的属性是pageX和pageY，表示X，Y坐标。

touchstart在触摸开始时触发事件;

touchend在触摸结束时触发事件;

touchmove触摸的过程中不断激发这个事件;

这三个事件都有一个timeStamp的属性，查看timeStamp属性，可以看到顺序是touchstart => touchmove=> touchmove => ··· =>touchmove =>touchend。

微信小程序开发中toast也是重要的消息提示方式

提示框：

wxshowToast(OBJECT)

显示消息提示框

OBJECT参数说明：

示例代码：

12345

wxshowToast({ title:'成功', icon:'success', duration: 2000})

wxhideToast()

隐藏消息提示框

123456789

wxshowToast({ title:'加载中', icon:'loading', duration: 10000}) setTimeout(function(){ wxhideToast()},2000)

wxshowModal(OBJECT)

显示模态d窗

OBJECT参数说明：

示例代码：

123456789

wxshowModal({ title:'提示', content:'这是一个模态d窗', success:function(res) { if(resconfirm) { consolelog('用户点击确定') } }})

wxshowActionSheet(OBJECT)

显示 *** 作菜单

OBJECT参数说明：

success返回参数说明：

示例代码：

12345678

wxshowActionSheet({ itemList: ['A','B', 'C'], success:function(res) { if(!rescancel) { consolelog(restapIndex) } }})

设置导航条

<view>提示：{{tip}}</view>

<button type="default" bindtap="showModal">点击我d出modal对话框</button>

<view>

<modal title="modal对话框" hidden="{{modalHidden}}" confirm-text="确定" cancel-text="取消"

bindconfirm="modalBindaconfirm" bindcancel="modalBindcancel">您好，我是modal对话框</modal>

</view>

Page({

data:{

// text:"这是一个页面"

tip:'',

buttonDisabled:false,

modalHidden:true,

show:false

},

showModal:function(){

thissetData({

modalHidden:!thisdatamodalHidden

})

},

modalBindaconfirm:function(){

thissetData({

modalHidden:!thisdatamodalHidden,

show:!thisdatashow,

tip:'您点击了确认按钮！',

buttonDisabled:!thisdatabuttonDisabled

})

},

modalBindcancel:function(){

thissetData({

modalHidden:!thisdatamodalHidden,

tip:'您点击了取消按钮！'

})

}

})

wxsetNavigationBarTitle(OBJECT)

动态设置当前页面的标题。

OBJECT参数说明：

示例代码：

123

wxsetNavigationBarTitle({ title:'当前页面'})

wxshowNavigationBarLoading()

在当前页面显示导航条加载动画。

wxhideNavigationBarLoading()

隐藏导航条加载动画。

页面跳转：

wxnavigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用wxnavigateBack可以返回到原页面。

OBJECT参数说明：

示例代码：

123

wxnavigateTo({ url:'testid=1'})

123456

//testjsPage({ onLoad:function(option){ consolelog(optionquery) }})

注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

wxredirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

OBJECT参数说明：

示例代码：

123

wxredirectTo({ url:'testid=1'})

wxnavigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。

OBJECT参数说明：

动画：

wxcreateAnimation(OBJECT)

创建一个动画实例animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。

注意: export 方法每次调用后会清掉之前的动画 *** 作

OBJECT参数说明：

123456

var animation = wxcreateAnimation({ transformOrigin:"50% 50%", duration: 1000, timingFunction:"ease", delay: 0})

animation

动画实例可以调用以下方法来描述动画，调用结束后会返回自身，支持链式调用的写法。

样式：

旋转：

缩放：

偏移：

倾斜：

矩阵变形：

动画队列

调用动画 *** 作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wxcreateAnimation() 一样的配置参数用于指定当前组动画的配置。

示例：

1

<viewanimation="{{animationData}}"style="background:red;height:100rpx;width:100rpx"></view>

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

Page({ data: { animationData: {} }, onShow:function(){ varanimation = wxcreateAnimation({ duration: 1000, timingFunction:'ease', }) thisanimation = animation animationscale(2,2)rotate(45)step() thissetData({ animationData:animationexport() }) setTimeout(function() { animationtranslate(30)step() thissetData({ animationData:animationexport() }) }bind(this), 1000) }, rotateAndScale:function () { // 旋转同时放大 thisanimationrotate(45)scale(2, 2)step() thissetData({ animationData:thisanimationexport() }) }, rotateThenScale:function () { // 先旋转后放大 thisanimationrotate(45)step() thisanimationscale(2, 2)step() thissetData({ animationData:thisanimationexport() }) }, rotateAndScaleThenTranslate:function () { // 先旋转同时放大，然后平移 thisanimationrotate(45)scale(2, 2)step() thisanimationtranslate(100, 100)step({ duration: 1000 }) thissetData({ animationData:thisanimationexport() }) }})

wxhideKeyboard()

收起键盘。

1、支持的前端开发语言有：

前端主要是用WXML、WXSS以及JavaScript来开发。本质上就是JS+CSS+HTML5，不过不能直接用HTML标签，微信提供一个组件库，没有DOM和其他浏览器上的API；网络、Canvas等也重新包装过。小程序开发底价

2、支持的后端开发语言有：

其实理论上后端用什么语言都可以，只要能够从服务器上获取到数据，例如：PHP、Java或者Python来开发。一般对于企业而言，都是采用php程序开发微信小程序；技术要求高一点的可以采用java程序开发。

想要了解更多有关小程序开发的相关信息，推荐咨询猪八戒网。猪八戒网成立于2006年，是中国领先的企业服务平台，服务交易独角兽企业。猪八戒网现有注册用户2800万、在全国布局线下数字化创业园区超过100个。十余年来，累计有10万余个人通过平台孵化成长为公司，超过100万人通过平台实现灵活就业，千万企业通过平台解决专业服务需求；专业性值得选择。

多级联动菜单在许多的筛选场景应用十分广泛。

先看看效果图：

menuwxml

menuwxss

menujsp

menuwxss

menujs

menuwxml

menuwxss

menujs

这里主要针对一个菜单栏进行详细讲解，其余两个原理相同。

游戏

menuwxml

这里推荐大家使用 <scroll-view></scroll-view> 组件，这样超过限定的高度的话，就可以在内部产生滚动条，整体布局不会乱。使用 <scroll></scroll> 组件的时候，记得要开启滚动的方向（scroll-y表示纵向，scroll-x表示横向），这些属性默认是关闭的。

menuwxss

注意：使用竖向滚动时，需要给<scroll-view/>一个固定高度，通过 WXSS 设置 height。

menujs

menujs部分主要的难点就是wxml和js之间的数据交互，这里很容易弄晕，尤其是对自己定义的变量弄清楚是什么意思。在这里我画了一个示意图来讲解这个难点。

最后给大家提供该项目的github项目，直接抓下来就可以打开使用，只需对显示的数据进行修改即可。

以上就是关于微信小程序实现左右联动的菜单列表全部的内容，包括:微信小程序实现左右联动的菜单列表、小程序开发用什么语言好，怎么样、小程序如何使用css3动画等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！