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

先前看到网上不少大神写的demo，其菜单栏主要以 A,B,C,D等字母为主，即A,B,C,D等字母为对应该项携带的 id（id不能为汉字或纯数字）。而笔者现在写的项目菜单栏为汉字，所以需要改变数据格式，进而需要改变 wxml 中的循环嵌套和获取。以下为成型后效果，希望对读者有帮助。

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

以下为完整数据

数据格式：

/ pages/listers/listerswxss /

/ pages/list-1/list-1wxss /

/ 总体主盒子 /

container {

position: relative;

width: 100%;

height: 1220rpx;

background-color: #f0f4f7;

color: #939393;

}

/ 左侧栏主盒子 /

nav_left{

/ 设置行内块级元素（没使用定位） /

display: inline-block;

width: 100%;

height: 100%;

/ 主盒子设置背景色为灰色 /

background: #fff;

text-align: center;

/ position: fixed; /

left: 0;

top: 0;

border-top: 1rpx solid #dedede;

}

/ 左侧栏list的item /

nav_left nav_left_items{

background: #fff;

/ 每个高30px /

height: 80rpx;

/ 垂直居中 /

line-height: 80rpx;

/ 再设上下padding增加高度，总高42px /

padding: 15rpx 0;

/ 只设下边线 /

border-bottom: 1px solid #dedede;

/ 文字14px /

font-size: 29rpx;

color: #101010;

font-weight:

}

/ 左侧栏list的item被选中时 /

nav_left nav_left_itemsactive{

/ 背景色变成白色/

background: #f0f4f7;

color: #ed1000;

}

/ 右侧栏主盒子 /

scroll_right{

/ 右侧盒子使用了绝对定位 /

position: fixed;

top: 0;

right: 0;

overflow: auto;

flex: 1;

/ 宽度75%，高度占满，并使用百分比布局 /

width: 75%;

height: 100%;

padding: 20rpx;

box-sizing: border-box;

background-color: #f0f4f7;

border-top: 1rpx solid #dedede;

}

mink::after{

display:block;content:'';clear:both;

}

jiul,jiul image{

width: 100%;

height: 170rpx;

}

minl{

font-size: 29rpx;

color: #777;

text-align: left;

line-height: 60rpx;

float: left;

background: #f0f4f7;

width: 100%;

/ height: 50rpx; /

}

mink{

width: 100%;

background: #fff;

height: 100%;

}

/ 右侧栏list的item /

nav_right_items{

/ 浮动向左 /

float: left;

/ 每个item设置宽度是3333% /

width: 50%;

/ height: 160rpx; /

text-align: center;

color: #4a4a4a;

background: #fff;

}

nav_right_items image{

/ 被设置宽高 /

width: 60px;

height: 50px;

margin-top: 15rpx;

}

nav_right_items text{

/ 给text设成块级元素 /

display: block;

margin-top: 5rpx;

margin-bottom: 10rpx;

font-size: 26rpx;

/ 设置文字溢出部分为 /

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

}

/ 自定义其他点击态样式类 /

other-navigator-hover{

background:#fff;

}

scroll_left{

width:25%;

height:100%;

background:#fff;

text-align:center;

position: fixed;

left: 0;top: 0

}

效果展示

通过在循环容器上加载音乐列表，通过设置值将循环容器上的音乐值设置给音频组件，实现点击音乐列表，切换不同的音乐。

创建数据表

注意：在数据中心你可以创建属于自己应用程序的数据表格，数据表格类型分为用户表、商品表、订单表和自定义表。

点击数据中心。

创建数据表：音频

字段包含:封面、歌手、音频（音频类型）、名称。

创建事件

注意：事件是构建数据与界面元素组件链接的抽象逻辑。数据表与界面元素组件通过事件连接。

点击事件中心。

创建事件:查询音频。

点击事件中心。

创建事件:随机查询一条音乐。

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中循环容器。

点击检查面板中的触发器面板。

创建触发器：查询。

选中动态容器。

点击检查面板中的触发器面板。

创建触发器:随机查询一条音乐。

选中音频组件。

点击检查面板中的数据绑定与设置。

打开开关：接收动态数据。

同上，需要将动态容器中的组件均打开该开关。

选中循环容器的列表条目。

点击检查面板中的触发器面板。

创建触发器：设置音频值。

设置歌手值。

设置音乐值。

设置封面值。

选中音频组件。

点击检查面板中的触发器面板。

创建触发器：播放。

创建触发器：暂停。

选中标签文本。

点击检查面板中的触发器面板。

创建触发器。

绑定数据

注意：绑定数据可以将事件返回的数据和组件显示内容进行绑定。

选中循环容器的列表条目。

点击检查面板中的数据绑定与设置。

绑定数据。

选中动态数据。

点击检查面板中的数据绑定与设置。

绑定数据。

这个问题，如果条件允许，最好在后台程序中解决，在后台读取出路径数据后，立刻就分割为数组，然后把所有数据按json格式返回给小程序，小程序再把它放入page的data中，这样小程序无须大的改动就能显示了。

如果这个办法行不通，也可以在小程序获得后台返回的json数据后，先把其中的路径数据（即用：分隔的多个路径的字符串）用split分割为数组，再放入page的data中，这样小程序的wxml文件也不需要大改就能显示多个了。

如果实在懒得很，后台返回的数据一股脑的直接放到page的data中，那么还有最后的一种解决办法，就是在wxml文件中通过小程序自身的wxs语言实时分割路径字符串，比如（假定字段名为image）：

<wxs module="fun">

   moduleexports = {

      imgPathSplit: function(s) {

         if (s) return ssplit(":");

      }

   }

</wxs>

然后在需要循环显示的地方加入代码（只是示例）：

<image wx:for="{{funimgPathSplit(itemimage)}}" wx:key="this" mode="aspectFill" src="{{item}}"></image>

这样，在小程序渲染页面时就会实时对路径字符串进行分割，再循环显示出来。

具体情况，由于你提供的信息有限，也无法说的更多了，你自己去研究。

Towify 支持在循环容器无限嵌套，展示多表关联数据，实现复杂数据的展示。

效果展示

通过使用循环容器的循环条目嵌套循环容器，同时创建一个存在多表关联字段的数据表，实现**列表中**标签展示。

效果图

创建数据表

注意：在数据中心你可以创建属于自己应用程序的数据表格，数据表格类型分为用户表、商品表、订单表和自定义表，本次案例使用的是自定义表

点击数据中心

创建一个“标签”数据表

创建一个“**”数据表，同时多表关联“标签”数据表

创建事件

注意：事件是构建数据与界面元素组件链接的抽象逻辑。数据表与界面元素组件通过事件连接。

点击事件中心

创建事件

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中根容器中的循环容器

点击检查面板中的触发器

创建触发器

绑定数据

注意：绑定数据可以将事件返回的数据和组件显示内容进行绑定。

选中循环容器的列表条目

点击检查面板中的数据绑定与设置

绑定数据

选中循环容器的列表条目中的循环容器的列表条目

点击检查面板中的数据绑定与设置

绑定数据

这样就可以通过在Towify 中展示多表关联数据，实现复杂数据的展示了。

效果展示

通过使用事件中心的查询事件，配置一个活动列表展示页。

创建数据表

注意：在数据中心你可以创建属于自己应用程序的数据表格，数据表格类型分为用户表、商品表、订单表和自定义表。

点击表格类型为用户表的数据表。

创建用户表。

创建活动数据表。

创建活动预约表。

转换中心

点击转换中心。

创建日期格式的转化。

创建事件

注意：事件是构建数据与界面元素组件链接的抽象逻辑，数据表与界面元素组件通过事件连接。

点击事件中心。

创建查询所有活动的事件。

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中循环容器。

点击检查面板中的触发器。

创建触发器。

绑定数据

注意：绑定数据可以将事件返回的数据和组件显示内容进行绑定。

选中循环容器的列表条目。

点击检查面板中的数据绑定与设置。

绑定数据。

我们在登录微信小程序的时候，都是直接授权我们的信息，所以有人担心自己的信息会泄露，想要了解怎么清除微信小程序的登录数据，很简单的。

第一步找到微信小程序，进入到小程序里面。

第二步，找到微信小程序里的设置，

第三步，进入设置，关闭信息授权，即可。

如此你登录小程序的数据就可以清除了，也不会担心自己信息泄露。

以上就是关于小程序微信商品列表的左右联动全部的内容，包括:小程序微信商品列表的左右联动、请问如何在小程序里制作一个音乐播放列表、微信小程序 列表输出问题等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！