欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

    微信小程序顶部简单纯文字导航列表样式模板制作设计下载

    2018-05-28 09:44 来源/作者:懒人模板 分类:小程序教程  « »
    今天给大家带来顶部简单纯文字导航列表,制作好以后效果图如下:
    一、wxml页面代码如下:
    <view class="page">
        
    <view class="page">
        <view class="page__bd">
            <view class="weui-tab">
                <view class="weui-navbar">
                    <block wx:for-items="{{voteTabs}}" wx:key="{{index}}">
                        <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
                            <view class="weui-navbar__title">{{item}}</view>
                        </view>
                    </block>
                    <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
                </view>
                <view class="weui-tab__panel">
                    <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
                        <!-- class list -->
                        <view class="index-bd class-list">
                            <view class="kind-list">
                            <block wx:for-items="{{coursesSet1}}" wx:key="{{item.id}}">
                                <view class="kind-list-item">
                                <view id="{{item.courseNo}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="noteGraph" data-evaluation="{{item.evaluation}}">
                                    <view class="kind-list-text">
                                        <text class="class-list-item-title">{{item.courseName}}</text>
                                        <text class="class-list-item-content">\n{{item.courseDesc}}</text>
                                    </view>
                                    <view class="evaluation-text">综合评价</view>
                                    <image class="kind-list-img" src="../resources/kind/logo.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.evaluation}}" wx:for-item="eva" wx:key="*item">
                                        <navigator url=".." class="navigator">
                                        <view class="navigator-text">{{eva}}</view>
                                        <view class="navigator-arrow"></view>
                                        </navigator>
                                    </block>
                                    </view>
                                </view>
                                </view>
                            </block>
                            </view>
                        </view>
                    </view>
    
    
                    <view class="weui-tab__content" hidden="{{activeIndex != 1}}">
                        <!-- class list -->
                        <view class="index-bd class-list">
                            <view class="kind-list">
                            <block wx:for-items="{{coursesSet2}}" wx:key="{{item.id}}">
                                <view class="kind-list-item">
                                <view id="{{item.courseNo}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="noteGraph" data-evaluation="{{item.evaluation}}">
                                    <view class="kind-list-text">
                                        <text class="class-list-item-title">{{item.courseName}}</text>
                                        <text class="class-list-item-content">\n{{item.courseDesc}}</text>
                                    </view>
                                    <view class="evaluation-text">综合评价</view>
                                    <image class="kind-list-img" src="../resources/kind/logo.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.evaluation}}" wx:for-item="eva" wx:key="*item">
                                        <navigator url=".." class="navigator">
                                        <view class="navigator-text">{{eva}}</view>
                                        <view class="navigator-arrow"></view>
                                        </navigator>
                                    </block>
                                    </view>
                                </view>
                                </view>
                            </block>
                            </view>
                        </view>
                    </view>
    
    
                    <view class="weui-tab__content" hidden="{{activeIndex != 2}}">
                        <!-- class list -->
                        <view class="index-bd class-list">
                            <view class="kind-list">
                            <block wx:for-items="{{coursesSet3}}" wx:key="{{item.id}}">
                                <view class="kind-list-item">
                                <view id="{{item.courseNo}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="noteGraph" data-evaluation="{{item.evaluation}}">
                                    <view class="kind-list-text">
                                        <text class="class-list-item-title">{{item.courseName}}</text>
                                        <text class="class-list-item-content">\n{{item.courseDesc}}</text>
                                    </view>
                                    <view class="evaluation-text">综合评价</view>
                                    <image class="kind-list-img" src="../resources/kind/logo.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.evaluation}}" wx:for-item="eva" wx:key="*item">
                                        <navigator url=".." class="navigator">
                                        <view class="navigator-text">{{eva}}</view>
                                        <view class="navigator-arrow"></view>
                                        </navigator>
                                    </block>
                                    </view>
                                </view>
                                </view>
                            </block>
                            </view>
                        </view>
                    </view>
    
    
                    <view class="weui-tab__content" hidden="{{activeIndex != 3}}">
                        <!-- class list -->
                        <view class="index-bd class-list">
                            <view class="kind-list">
                            <block wx:for-items="{{coursesSet4}}" wx:key="{{item.id}}">
                                <view class="kind-list-item">
                                <view id="{{item.courseNo}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="noteGraph" data-evaluation="{{item.evaluation}}">
                                    <view class="kind-list-text">
                                        <text class="class-list-item-title">{{item.courseName}}</text>
                                        <text class="class-list-item-content">\n{{item.courseDesc}}</text>
                                    </view>
                                    <view class="evaluation-text">综合评价</view>
                                    <image class="kind-list-img" src="../resources/kind/logo.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.evaluation}}" wx:for-item="eva" wx:key="*item">
                                        <navigator url=".." class="navigator">
                                        <view class="navigator-text">{{eva}}</view>
                                        <view class="navigator-arrow"></view>
                                        </navigator>
                                    </block>
                                    </view>
                                </view>
                                </view>
                            </block>
                            </view>
                        </view>
                    
                    </view>
    
    
                    <view class="weui-tab__content" hidden="{{activeIndex != 4}}">
                        <!-- class list -->
                        <view class="index-bd class-list">
                            <view class="kind-list">
                            <block wx:for-items="{{coursesSet5}}" wx:key="{{item.id}}">
                                <view class="kind-list-item">
                                <view id="{{item.courseNo}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="noteGraph" data-evaluation="{{item.evaluation}}">
                                    <view class="kind-list-text">
                                        <text class="class-list-item-title">{{item.courseName}}</text>
                                        <text class="class-list-item-content">\n{{item.courseDesc}}</text>
                                    </view>
                                    <view class="evaluation-text">综合评价</view>
                                    <image class="kind-list-img" src="../resources/kind/logo.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.evaluation}}" wx:for-item="eva" wx:key="*item">
                                        <navigator url=".." class="navigator">
                                        <view class="navigator-text">{{eva}}</view>
                                        <view class="navigator-arrow"></view>
                                        </navigator>
                                    </block>
                                    </view>
                                </view>
                                </view>
                            </block>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    
    </view>

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议