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

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

历史百科软件——首页

说明：本软件是借鉴一个名为“全历史”的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" >
          <block wx:for="{{navs}}">
            <view class="item" bindtap="navBtn" id="{{index}}">
              <view>
                <image src="{{item.img}}" style="width:58rpx;height:56rpx;"></image>
              </view>
              <view>
                {{item.name}}
              </view>
            </view>
          </block>
      </view>
      <view class="hr"></view>
      <!-- 内容显示 -->   
      <scroll-view scroll-y="true" class="item_1" style="width:100%;margin-top:17rpx">  
          <view class="content" wx:for="{{contentList}}">
            <view class="head">
              <view><image src="{{item.headIcon}}" style="width:60rpx;height:60rpx;border-radius: 50%;overflow:hidden;"></image></view>
              <view class="userName">{{item.userName}}</view>
              <view wx:if="{{item.isHot}}" class="hot"><image src="../../images/icon/hot.png" style="width:30rpx;height:30rpx;margin-top:17rpx"></image></view>
            </view>
            <view class="title" style="width:100%">标题：{{item.title}}</view>
            {{item.content}}
            <view class="sanlian">
              <!-- 点赞 -->
              <view bindtap="clickDian" data-index="{{index}}" class="haoPing">
                <image wx:if="{{!item.isdianzan}}" src="../../images/icon/dianzan.png" style="width:25rpx;height:25rpx; margin-top:15rpx;padding-right: 5px;"></image>
                <image wx:if="{{item.isdianzan}}"  src="../../images/icon/dianzan_1.png" style="width:25rpx;height:25rpx;margin-top:15rpx;padding-right: 5px;"></image>
                好评
              </view>
              <!-- 评论 -->
              <view class="pinglun" bindtap="pinglun">
                <image src="../../images/icon/pinglun.png" style="width:25rpx;height:25rpx;margin-top:15rpx;padding-right: 5px"></image>
                评论
              </view>
              <!-- 转发 -->
              <view class="zhuanfa" bindtap="onShareAppMessage">
                <image src="../../images/icon/zhuanfa.png" style="width:25rpx;height:25rpx;margin-top:15rpx;padding-right: 5px"></image>
                分享
              </view>
            </view>
            <view class="hrr"></view> 
          </view>            
      </scroll-view> 
    </swiper-item>
    <!-- 视频 -->
    <swiper-item>
      <view>可自由发挥，可参考推荐</view>
    </swiper-item>
  </view>
</swiper>

• wxss代码

/* pages/first/first.wxss */
.search{  
  width: 80%;  
}  
.search_arr {  
  border: 1px solid #d0d0d0;  
  border-radius: 30rpx;  
  margin-left: 20rpx;  
}  
.search_arr input{  
  margin-left: 60rpx;  
  height: 60rpx;  
  border-radius: 5px;  
}  
.bc_text {  
  line-height: 68rpx;  
  height: 68rpx;  
  margin-top: 34rpx;  
}  
  
.sousuo {  
  margin-left: 15rpx;  
  width: 15%;  
  height: 65rpx;  
  line-height: 65rpx; 
  text-align: center;  
  border: 1px solid #f71b1b; 
  background-color: #f71b1b; 
  color: #fffcfc;
  border-radius: 30rpx;  
}  
.fabu {  
  margin-left: 15rpx;  
  width: 15%;
  height: 65rpx;  
  line-height: 65rpx; 
  text-align: center;  
  border: 1px solid #f71b1b; 
  background-color: #f71b1b; 
  color: #fffcfc;
  border-radius: 30rpx;  
}  
.page_row{  
  display: flex;  
  flex-direction: row  
}  
.searchcion {  
  margin: 10rpx 10rpx 10rpx 10rpx;  
  position: absolute;  
  left:25rpx;  
  z-index: 2;  
  width: 20px;  
  height: 20px;  
  text-align: center;  
}
.bg{
  margin-top: 10px;
  background-color: #f7f7f7;
  height: 40px;
  color:#000000;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.nav{
  display: flex;
  width: 100%;
  height: 100%;
}
.nav_1{
  display: flex;
  width: 100%;
  height: 100%;
}

.normal {
  width: 370rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  font-size: 15px;
  padding-left: 5px;
  /* border-right: 2rpx solid #cccccc; */
}
.select {
  border-radius: 30rpx; 
  background-color: #f71b1b;
  color: rgb(255, 254, 254);
}
.navs{
  text-align: center;
}
.item_0{
  display: flex;
  justify-content: space-around;
}
.item{
  /* margin-top: 0rpx; */
  margin-left: 10rpx;
  padding-left: 8rpx;
  text-align: center;
  font-family: "Microsoft YaHei";
  font-size: 12px;
  width: 100%;
  display: inline-block;
  margin-right: 10rpx;
}
.hr{
  height: 1px;
  background-color: #050101;
  opacity: 0.2;
  margin-top: 10px;
}
.item_1{
  margin: 10px;
}
.head{
  display: flex;
  text-align: left;
  flex-direction: row;
  height: 50px;
  /* margin-top: 30px; */
  align-items: center;
}
.userName{
  width: 60%;
  margin-left: 10px;
  font-weight: bold;
}
.hot{
  padding-right: 15px;
  text-align: right;
  width: 30%;
}
.title{
  display: flex;
  width: 50%;
  /* margin-left: 10px; */
  font-weight: bold;
}
.content{
  /* margin-top: -30px; */
  text-align: left;
  margin-right: 20px;
  padding: 10px;
  line-height: 25px;
  position: relative;
}
.foot{
  margin-left: 20px;
  padding: 10px;
  color: #999999
}
.sanlian{
  height: 20px;
}
.haoPing{
  display: flex;
  width: 30%;
  position: absolute;
  bottom: 0;
  right: 300rpx;
}
.pinglun{
  display: flex;
  width: 30%;
  position: absolute;
  bottom: 0;
  right: 150rpx;
}
.zhuanfa{
  display: flex;
  width: 30%;
  position: absolute;
  bottom: 0;
  right: 0rpx;
}
.hrr{
  display: flex;
  position: absolute;
  height: 1px;
  background-color: #050101;
  opacity: 0.2;
}

• js代码

// pages/first/first.js
Page({
  data: {
    currentTab:0,
    flag:0,
    indicatorDots_1:false,
    autoplay_1:true,
    interval_1:5000,
    duration_1:1000,
    imgUrls1:[
      "../../images/lunbo/lunbo_1.jpg",
      "../../images/lunbo/lunbo_2.jpg",
      "../../images/lunbo/lunbo_3.jpg",
      "../../images/lunbo/lunbo_4.jpg",
      "../../images/lunbo/lunbo_5.jpg",
      "../../images/lunbo/lunbo_6.jpg",
      "../../images/lunbo/lunbo_6.jpg",
      "../../images/lunbo/lunbo_8.jpg",
      "../../images/lunbo/lunbo_9.jpg",
      "../../images/lunbo/lunbo_10.jpg",
      "../../images/lunbo/lunbo_11.png",
      "../../images/lunbo/lunbo_12.jpg"
    ],
    navs:[],
    contentList:[],
    navScrollLeft: 0
  },
  // switchNav绑定事件
  SwitchNav:function(e){
    console.log(e);
    var page = this;
    var id = e.target.id;
    if(this.data.currentTab==id){
      return false;
    }else{
      page.setData({currentTab:id})
    }
    page.setData({flag:id})
  },
  //导航图标
  onLoad: function (options) {
    var page = this;
    var navs = this.loadNavData();
    page.setData({navs:navs})
  },
  navBtn:function(e){
    console.log(e);
    var id = e.currentTarget.id;
    if(id == "0"){
      wx.navigateTo({
        url: '../quanguji/quanguji',
      })
    };
    if(id == "1"){
        wx.chooseLocation({
          success: function (res) {
              console.log(res)
          }
        })
    };
    if(id == "2"){
      wx.navigateTo({
        url: '../guanxitupu/guanxitupu',
      })
    };
    if(id == "3"){
      wx.navigateTo({
        url: '../lishitoday/lishitoday',
      })
    };
    if(id == "4"){
      wx.navigateTo({
        url: '../type/type',
      })
    }
  },
  loadNavData: function () {
    var navs = [];
    var nav0 = new Object();
    nav0.img = '../../images/tubiao/11.png';
    nav0.name = '历史古籍';
    navs[0] = nav0;

    var nav1 = new Object();
    nav1.img = '../../images/tubiao/6.png';
    nav1.name = '当前地图';
    navs[1] = nav1;

    var nav2 = new Object();
    nav2.img = '../../images/tubiao/5.png';
    nav2.name = '关系图谱';
    navs[2] = nav2;

    var nav3 = new Object();
    nav3.img = '../../images/tubiao/28.png';
    nav3.name = '历史今天';
    navs[3] = nav3;

    var nav4 = new Object();
    nav4.img = '../../images/tubiao/13.png';
    nav4.name = '全部频道';
    navs[4] = nav4;
    return navs;
  },
  //页面显示内容
  contentLists () {
    let arr = [{headIcon: 'http://img.58cdn.com.cn/dist/jxedt/images/crm_wechat/crm_pc_install.png',
      userName:'宝宝',
      isHot:true,
      title:'范仲淹有志于天下',
      content: '范仲淹二岁而孤，母贫无靠，再适常山朱氏。既长，知其世家，感泣辞母，去之南都入学舍。昼夜苦学，五年未尝解衣就寝。或夜昏怠，辄以水沃面。往往糜粥不充，日昃始食，遂大通六经之旨，慨然有志于天下。常自诵曰：当先天下之忧而忧，后天下之乐而乐。',
      isdianzan: false
    }]
    this.setData({
      contentList: arr
    });
  },
  //点赞功能
  clickDian(e){ 
    const that = this;
    const index = e.currentTarget.dataset.index;
    console.log(index);
    console.log(e);
    if (this.data.contentList[index].isdianzan) {
      this.data.contentList[index].isdianzan = false;
    }
    else {
      this.data.contentList[index].isdianzan = true;
    }
    this.setData({
      contentList: that.data.contentList
    });
  },
  //弹出搜索页面
  suo: function (e) {
    console.log(wx)
    wx.navigateTo({  
      url: '/pages/search/search'
    })  
  }, 
  //弹出发布页面 
  fabu: function (e) {
    wx.navigateTo({  
      url: '/pages/fabu/fabu'
    })  
  }, 
  //弹出评论页面
  pinglun: function (e) {
    wx.navigateTo({  
      url: '/pages/pinglun/pinglun'
    })  
  },
  onShow: function () {
    this.contentLists();
  },
})

结语

以上就是我做的首页的一个展示，代码可能写的不是很简洁，如果有更好的写法，欢迎大家留言。