微信小程序省市联动（小程序省市区）

摘要： 本文目录一览：1、微信公众号关联小程序怎么弄?手把手教会你2、...

本文目录一览：

• 1、微信公众号关联小程序怎么弄?手把手教会你
• 2、小程序微信商品列表的左右联动
• 3、微信小程序--多个按钮选中的联动效果

微信公众号关联小程序怎么弄?手把手教会你

步骤1：登录微信公众平台 登录您的微信公众号管理后台，依次在左侧菜单栏中选择“小程序”→“小程序管理”，然后点击“添加”按钮；步骤2：关联小程序 点击“关联小程序”按钮，进入关联小程序页面。

首先是登录公众号的后台，然后在公众号左侧菜单栏找到“小程序”这个栏目，点击“小程序管理”。

打开微信公众号后台，依次点击“设置”、“公众号设置”、“相关小程序查看”，点击“关联小程序”。通过手机验证，输入小程序的AppID就可以了。

需要绑定的小程序ID 方法/步骤 打开浏览器，搜索微信公众号官网，进入官网。

小程序微信商品列表的左右联动

实现该功能的思路：通过点击左侧滑栏的某一项，获取到该元素携带的 id ，然后动态传给右侧滑栏的 scroll-into-view ，从而实现右侧滑栏对应的该元素运动置顶。

实现左右联动的菜单列表，主要依靠scroll-view的是三个属性：scroll-top：设置竖向滚动条位置（可视区域最顶部到scroll-view顶部的距离）；scroll-into-view：值应为某子元素id（id不能以数字开头）。

效果展示通过使用循环容器的滚动监听和设置值，同时配置前置条件实现滚动到具体某一项，实现顶部图片滑动联动底部图片滑动效果。

多级联动菜单在许多的筛选场景应用十分广泛。先看看效果图：menu.wxml menu.wxss menu.jsp menu.wxss menu.js menu.wxml menu.wxss menu.js 这里主要针对一个菜单栏进行详细讲解，其余两个原理相同。

首先，打开微信app点击右上角的放大镜。其次，关联时需要小程序开发者授权。最后，用小程序管理员的微信进行扫码授权就可以了。

wx.createSelectorQuery 返回一个 SelectorQuery 对象实例。在自定义组件或包含自定义组件的页面中，应使用 this.createSelectorQuery() 来代替。在当前页面下选择第一个匹配选择器 selector 的节点。

微信小程序--多个按钮选中的联动效果

1、多级联动菜单在许多的筛选场景应用十分广泛。先看看效果图：menu.wxml menu.wxss menu.jsp menu.wxss menu.js menu.wxml menu.wxss menu.js 这里主要针对一个菜单栏进行详细讲解，其余两个原理相同。

2、实现效果如下：实现左右联动的菜单列表，主要依靠scroll-view的是三个属性：scroll-top：设置竖向滚动条位置（可视区域最顶部到scroll-view顶部的距离）；scroll-into-view：值应为某子元素id（id不能以数字开头）。

3、首先打开微信小程序。其次通过checkbox-group实际项目中选择自定义的。最后使用view组件，用js来处理实现跟表单的单选、多选一样的效果。

4、下图是小程序 小米Lite 的 Tab 切换效果：切换 Page 时，Tab 下方的指示器（红色横条）是没有滚动效果而是直接闪现到下一个 Page 的，这也是市面上小程序常见的 Tab 切换效果。

5、如果你还没有使用过任何小程序，现在在微信首页的搜索框搜索「解忧室」，点击解忧室的.小程序，发现页面的入口就会显现出来。