微信小程序之历史百科软件

微信小程序之历史百科软件

历史百科软件——首页

说明：本软件是借鉴一个名为“全历史”的APP，这是一款超级棒的历史科普软件，也是我一直在用的一款软件，里面的涵盖面十分广泛，对历史知识感兴趣的小伙伴，可以下载一个看看，相信不会让你失望的。

• 首页做完是这样子的一个样子。下面附上代码，第一次做，是个新手，代码可能有点冗余，敬请谅解！如有更好的方法，欢迎留言，我会虚心听取意见，努力进步！

代码块

• wxml代码

<!-- 顶部 -->
<view class='page_row' >  
  <navigator class="search" url="pages/search/search" bindtap="suo">  
    <view class="df search_arr">  
      <icon class="searchcion" size='20' type='search'></icon>  
      <input class="" disabled placeholder="请输入关键字" value="{
    {searchValue}}"/>  
    </view>  
  </navigator> 
  <navigator class='fabu' url="pages/fabu/fabu"  bindtap="fabu">发布</navigator>   
</view> 
<view class="bg">
  <view class="nav"  scroll-left="{
    {navScrollLeft}}" scroll-with-animation="{
    {true}}">
    <view class="{
    {flag==0?'normal select':'normal'}}" id="0" bindtap="SwitchNav">推荐 </view>
  </view>
  <view class="nav_1" scroll-left="{
    {navScrollLeft}}" scroll-with-animation="{
    {true}}">
    <view class="{
    {flag==1?'normal select':'normal'}}" id="1" bindtap="SwitchNav">视频 </view>
  </view>
</view>
<swiper current="{
    {currentTab}}" style="height:1500px;overflow:hidden;">
  <view style="height:auto;overflow-y: scroll;">
    <!-- 推荐 -->
    <swiper-item>
      <!--轮播图 -->
      <view class="haibao">
        <swiper indicator-dots="{
    {indicatorDots_1}}" autoplay="{
    {autoplay_1}}" interval="{
    {interval_1}}" duration="{
    {duration_1}}">
          <block wx:for="{
    {imgUrls1}}">
            <swiper-item>
              <image src="{
    {item}}" class="silde-image" style="width:100%;height:130px;"></image>
            </swiper-item>
          </block>
        </swiper>
      </view>
      <!-- 导航图标 -->
      <view class="item_0" >