守望轩Wordpress小程序修改记录——首页代码修改-1

最近这个周末有点忙,星期五的时候带我家的小母猫去做了绝育这几天都陪她去换药和输液

附一张生无可恋的脸

 

 

今天我要正式开始每天一更啦,最近有些朋友在让我更新一下我的小程序页面的文章,这几天会陆续写出来,不要着急 = ̄ω ̄=

 

还有我写的文章和提供代码都是无偿免费的,因为这是一个开源的程序,我只是修改了一些简单的页面代码,我愿意免费分享出来给大家参考,不会存在收费的情况

只当是交个朋友,可以加我微信“MRmagg”,或者留言换个友链什么的都可以,也希望大家不要做出来以后去收别人的钱在分享帮别人做

 

我原来写过一些文章,但是折腾来折腾去都没有了,以后会经常更新一些技术上的干货(我认为),都是我在使用一些程序和碰见的代码问题

 

好了不啰嗦了进入正题,今天写的守望轩Wordpress小程序首页

 

1.首页凸起样式幻灯片

我们需要找到小程序页面路径 pages/index/index

打开index.wxml替换以下代码

源代码

<view class="index-header" style="display:{{displaySwiper}}">
  <swiper class="index-swiper" indicator-dots="true" interval="10000" autoplay="true" indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="rgba(255, 255, 255, .7)">
    <block wx:key="id" wx:for="{{postsShowSwiperList}}">
      <swiper-item id="{{item.id}}" index="{{index}}" data-redicttype="{{item.type}}" data-appid="{{item.appid}}" data-url="{{item.url}}" bindtap="redictAppDetail">
        <image mode="aspectFill" src="{{item.post_medium_image}}" style="width:100%" />
        <view class="swiper-mask"></view>
        <view class="swiper-desc">
          <text>{{item.post_title}}</text>
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

替换后

<view class="index-header" style="display:{{displaySwiper}}">
  <swiper class="index-swiper" indicator-dots="" interval="10000" autoplay="true" indicator-color="rgba(255, 255, 255, .2)" indicator-active-color="rgba(255, 255, 255, .7)" previous-margin="30rpx" next-margin="50rpx" circular="true" bindchange="handleChange">
    <block wx:key="id" wx:for="{{postsShowSwiperList}}">
      <swiper-item id="{{item.id}}" index="{{index}}" data-redicttype="{{item.type}}" data-appid="{{item.appid}}" data-url="{{item.url}}" bindtap="redictAppDetail" style="">
        <view wx:if="{{item.post_thumbnail_image}}">
          <image class="itemImg {{currentIndex == index ? 'active': ''}}" mode="aspectFill" src="{{item.post_thumbnail_image}}" style="width:96%;margin:0 24rpx;border-radius:8rpx" />
        </view>
        <view wx:else>
          <image class="itemImg {{currentIndex == index ? 'active': ''}}" mode="aspectFill" src="{{item.content_first_image}}" style="width:96%;margin:0 24rpx;border-radius:8rpx" />
        </view>
      </swiper-item>
    </block>
  </swiper>
</view>

接下来打开index.wxss替换以下代码

源代码

.index-container {
  /* padding: 0 24rpx; */
  background-color: #fff;
}

.index-header {
  text-align: center;
  font-weight: normal;
  font-size: 30rpx;
  line-height: 40rpx;
  color: #757575;
  /* margin-top: 5rpx; */
}

/*   index   swiper  */

swiper.index-swiper {
  position: relative;
  height: 420rpx;
}

swiper .swiper-mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}

swiper image {
  display: block;
  width: 100%;
  height: 100%;
}

swiper .swiper-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(63, 76, 88, 0.3)100%);
  color: #fff;
  line-height: 150rpx;
  margin: 0 auto;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 30rpx;
 /* height: 120rpx; */
  text-shadow: 0px 0px 16px #646d75;
}

替换后

.index-container {
  background-color: #fff;
}

.index-header {
  text-align: center;
  font-weight: normal;
  font-size: 30rpx;
  line-height: 40rpx;
  color: #757575;
}

.scroll-view {
  width: 100%;
  white-space: normal;
}

swiper.index-swiper {
  position: relative;
  height: 420rpx;
  margin: 24rpx 0;
}

swiper .swiper-mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
}

swiper image {
  display: block;
  width: 100%;
  height: 100%;
}

swiper .itemImg {
  position: absolute;
  width: 100%;
  height: 380rpx;
  z-index: 5;
  opacity: 0.7;
  top: 4.3%;
}

swiper .active {
  opacity: 1;
  z-index: 10;
  height: 420rpx;
  transition: all 0.2s ease-in 0s;
  top: 0%;
}

swiper .swiper-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0)0%, rgba(63, 76, 88, 0.3)100%);
  color: #fff;
  line-height: 150rpx;
  margin: 0 auto;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 26rpx;
  text-shadow: 0px 0px 16px #646d75;
}

然后打开index.js加入以下代码

handleChange: function (e) {
    this.setData({
      currentIndex: e.detail.current
    })
  },

  onShow: function (options) {
    wx.setStorageSync('openLinkCount', 0);
  },

不知道加在哪可以加在获取文章列表数据代码的上面

幻灯片就搞定啦!

 

2.去掉导航下面的长方形块状分类

打开index.wxml

注释掉以下代码

<!-- <view class='top-Nav2'>
      <navigator url='../hot/hot' hover-class='none'>
        <view class="top-Nav2-item">
          <view class="top-Nav2-item-word">
            <text>排行榜单</text>
          </view>
        </view>
      </navigator>


      <navigator url="../../pages/list/list?categoryID=1059" hover-class='none'>
        <view class="top-Nav2-item2">
          <view class="top-Nav2-item-word">
            <text>微信小程序</text>
          </view>
        </view>
      </navigator>
</view> -->

3.将搜索栏更改到上方并且加背景颜色

首先打开index.wxml

找到以下代码

<form catchsubmit="formSubmit" catchreset="formReset" id="search-form">
      <view class="search-pancel">
        <input value="" id="search-input" name="input" confirm-type="search" class="search-input" placeholder="搜索你感兴趣的内容..." bindconfirm="formSubmit"></input>
        <button class="search-button" form-type="submit" size="mini" plain="true">
          <icon type="search" color="#959595" size="12" />
        </button>
      </view>
</form>

把这段代码粘贴到

<import src="../../templates/copyright.wxml" />

的下面,就可以把搜索框加到最上面了,然后是改颜色

打开index.wxss替换下面代码

源代码

.search-button {
  border-left: 0 !important;
  border-top: 1px solid #fff !important;
  border-right: 1px solid #fff !important;
  border-bottom: 1px solid #fff !important;
  background-color: #fff !important;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  color: #296fd0 !important;
  width: 20%;
  margin: 0 !important;
  box-shadow: 1px 1px 6px #ecf0f0;
}

.search-button icon {
  position: absolute;
  margin: 28rpx 16rpx;
}

.search-input {
  background-color: #fff;
  padding: 16rpx 0 16rpx 32rpx;
  min-height: 1rem;
  font-size: 30rpx;
  /*  position: absolute;*/
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  /* border: 1px solid #ededed;  */
  border-right: 0 !important;
  height: 48rpx;
  width: 80%;
  text-align: left;
  box-shadow: 1px 1px 6px #ecf0f0;
}

.share-button {
  border: 1px solid #eee !important;
  color: #296fd0 !important;
  left: 10rpx;
  height: 100rpx;
  width: 200rpx;
}

.search-pancel {
  display: flex;
  flex-direction: row;
  background-color: #eee;
  padding: 24rpx 24rpx;
}

.search-pancel image {
  width: 50rpx;
  height: 50rpx;
  margin-left: 20rpx;
  vertical-align: middle;
}

替换后

.search-button {
  border-left: 0 !important;
  border-top: 1px solid #fff !important;
  border-right: 1px solid #fff !important;
  border-bottom: 1px solid #fff !important;
  background-color: #fff !important;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 60px;
  border-bottom-right-radius: 60px;
  color: #296fd0 !important;
  width: 20%;
  margin: 0 !important;
}

.search-button icon {
  position: absolute;
  margin: 28rpx 16rpx;
}

.search-input {
  background-color: #fff;
  padding: 16rpx 0 16rpx 32rpx;
  min-height: 1rem;
  font-size: 30rpx;
  border-bottom-left-radius: 60px;
  border-top-left-radius: 60px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: 0 !important;
  height: 48rpx;
  width: 80%;
  text-align: left;
}

.share-button {
  border: 1px solid #eee !important;
  color: #118fff !important;
  left: 10rpx;
  height: 100rpx;
  width: 200rpx;
}

.search-pancel {
  display: flex;
  flex-direction: row;
  background-color: #118fff;
  padding: 24rpx;
}

.search-pancel image {
  width: 50rpx;
  height: 50rpx;
  margin-left: 20rpx;
  vertical-align: middle;
}

背景颜色可以根据你自己的window窗口进行修改,我上面是默认样式的颜色

搜索栏就搞定了

 

今天的首页改造就写到这了,下一期或者大下期或者大大下期,更新首页改造2,图文显示样式等等

如果在小程序里面看代码费劲,可以直接访问本文连接“原文链接”在浏览器里面打开,进行复制更改

还是那句话我分享给你是免费的,也希望你分享给别人也是免费的不要拿来赚钱,这是一个开源的程序谢谢Jianbo大佬

在附赠一张上面小母猫的男朋友小渣猫的合影

 

 

今天就到这了

END拜拜ヾ(•ω•`)o

 


郑重提醒:下载前请必读《免责声明》

本站声明:本站所有资源均来源于互联网,不保证100%完整、不提供任何技术支持,分享目的仅限于学习和测试,一切商业行为与本站无关,下载后请在24小时内删除。请勿用于商业用途,如需商业使用请向官方购买授权,由于使用该资源引起的侵权行为与本站无关!如有侵权,请联系admin@madapang.xin及时删除!

Madapang

一个喜欢撸猫,听歌,玩小霸王,睡觉的人。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

微信扫一扫

微信扫一扫

微信扫一扫,分享到朋友圈

守望轩Wordpress小程序修改记录——首页代码修改-1
返回顶部

显示

推荐使用快捷登录:

忘记密码?

显示

显示

获取验证码

Close