请教微信小程序navigator组件列表子页面怎样设成中文名

zpddln 2018-02-01 08:59:24
看到小程序发布的示例程序挺好,想改一下来用,在js文件的list中加了pagesch: [ ] 项,存放对应于pages[ ] 的中文名,想用如下方法将navigator组件列表中子页面设成中文名,原来是一行一个页面名,结果渲染后每行罗列出全部页面名,敬请各位指点,修改,谢谢。

index.js 文件 :

Page({
data: {
list: [
{
id: 'view',
name: '新闻图片',
open: false,
pages: [ 'swiper'],
pagesch: ['图片'] //后加的
}, {
id: 'content',
name: '公司简介',
open: false,
//pages: ['text', 'icon', 'progress']
pages: ['text'],
pagesch: ['t']
}, {
id: 'form',
name: '产品介绍',
open: false,
pages: ['bh1', 'bh2', 'rh1', 'rh2', 'rh3','qita'],
pagesch: ['助剂1', '助剂2', '日化原料1', '日化原料2', '日化原料3','其他']
}, {
id: 'media',
name: '技术交流',
open: false,
pages: ['image', 'audio', 'video'],
pagesch: ['交流1','交流2','交流3']
}, {
id: 'dmap',
name: '联系我们',
open: false,
pages: ['map'],
pagesch: ['联系']
}
]
},
kindToggle: function (e) {
var id = e.currentTarget.id, list = this.data.list;
for (var i = 0, len = list.length; i < len; ++i) {
if (list[i].id == id) {
list[i].open = !list[i].open
} else {
list[i].open = false
}
}
this.setData({
list: list
});
}
})

index.wxml文件:

<view class="index-back">
<view><image class="index-titu" src="resources/kind/titu.png" mode="aspectfile"></image></view>
<view class="index-line"></view>
<view class="index-middle">
<image class="index-titu2" src="resources/kind/titu2.png" mode="aspectfile"></image>
</view>

<view class="index-bd">
<view class="kind-list">
<block wx:for-items="{{list}}" wx:key="{{item.id}}">
<view class="kind-list-item">
<view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
<view class="kind-list-text">{{item.name}}</view>
<image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
</view>
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">

<navigator url="pages/{{page}}/{{page}}" class="navigator">
<!--- <view class="navigator-text">{{page}}</view> ---原文,显示各子页英文页面名-->
<view wx:for-items="{{item.pagesch}}" wx:for-item="page2" wx:key="*item" class="navigator-text" > {{page2}}</view> <!--后改,显示各子页中文名-->

<view class="navigator-arrow"></view><!--箭头-->
</navigator>
</block>
</view>
</view>
</view>
</block>
</view>
</view>
</view>
...全文
739 2 打赏 收藏 转发到动态 举报
写回复
用AI写文章
2 条回复
切换为时间正序
请发表友善的回复…
发表回复
86的风 2018-11-19
  • 打赏
  • 举报
回复
博主 你这个idx是什么
zpddln 2018-02-17
  • 打赏
  • 举报
回复
自己试了多次后解决: <navigator url="pages/{{page}}/{{page}}" class="navigator"> <view class="navigator-text" > {{item.pagesch[idx]}} </view> <view class="navigator-arrow"></view> </navigator>

3,143

社区成员

发帖
与我相关
我的任务
社区描述
微信开发即微信公众平台开发,将企业信息、服务、活动等内容通过微信网页的方式进行表现,通过二次开发可以将公众账号由一个媒体型营销工具转化成提供服务的产品。
社区管理员
  • 微信开发
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧