作者：xiaochun365，来自原文地址 
//wxml

1. <scroll-view class="reportTypeScroll" scroll-x="true" scroll-left="{{toLeftNum}}">
2. <block wx:for-items="{{reportTypeList}}" wx:key="{{index}}">
3. <text type="primary" style="width:{{itemWidth}}rpx;" bindtap="bind{{item.id}}" data-typeid="{{item.id}}" class="{{currentId==item.id?'clickSel':'removeSel'}}">{{item.name}}</text>
4. </block>
5. </scroll-view>

//js

1. var reportTypeList = [
2. { name: "日报1", id: "1" },
3. { name: "目录2", id: "2" },
4. { name: "季报3", id: "3" },
5. { name: "月报4", id: "4" },
6. { name: "日报5", id: "5" },
7. { name: "目录6", id: "6" },
8. { name: "季报7", id: "7" },
9. { name: "月报8", id: "8" },
10. { name: "日报9", id: "9" },
11. { name: "目录10", id: "10" },
12. { name: "季报11", id: "11" },
13. { name: "月报12", id: "12" }]
14.  
15. var pageObject = {
16. data: {
17. reportTypeList: reportTypeList,
18. num: 0,
19. toLeftNum: 0,
20. itemWidth: 150
21. }
22. }
23.  
24. for (var i = 0; i < reportTypeList.length; i++) {
25. (function (item) {
26. pageObject['bind' + item.id] = function (e) {
27. var id = parseInt(e.currentTarget.dataset.typeid)
28.  
29. this.setData({
30. currentId: id
31. })
32. }
33. })(reportTypeList[i])
34. }
35.  
36. Page(pageObject)

//wxss

1. /**index.wxss**/
2.  
3. .reportTypeScroll {
4. margin: 40px 0px 20px 0px;
5. white-space: nowrap;
6. display: flex;
7. }
8.  
9. .clickSel {
10. color: red;
11. }
12.  
13. .removeSel {
14. color: black;
15. }
16.  
17. text {
18. height: 150rpx;
19. display: inline-block;
20. text-align: center;
21. }